flex换行后行间距“过大”实为align-content: stretch拉伸整行所致，它将容器交叉轴剩余高度均分给各行，使子项纵向撑开；真正控制行间距应使用row-gap。
Flex换行后行间距“过大”，基本不是加了margin，而是align-content: stretch在拉伸整行——它把容器交叉轴的剩余高度均分给每一行，子项被纵向撑开，视觉上像“空了一大截”。
为什么align-content会让行看起来间距爆炸
当容器有固定高度（比如height: 300px），而所有子项加起来总高只有 120px 时，align-content: stretch（默认值）会强制每行都拉高到填满剩余空间。结果是：行本身变高了，子项被撑开，上下留白其实是“被拉出来的”，不是插进去的。
- 打开 DevTools → Elements → Computed，检查该容器的
height和content height，如果前者远大于后者，就是stretch在生效 -
align-items: stretch（父容器默认值）会加剧这种拉伸，尤其当子项没设height或min-height - 某行里有个图片没设
height，导致该行基线偏移，拉伸后更显错位，容易误判为“行距不均”
align-content没反应？先确认三个硬性条件
它只在同时满足以下三点时才起效，缺一不可：
- 容器必须有
display: flex且flex-wrap: wrap（或wrap-reverse） - 子项必须真实换行——不是靠
width硬卡出来的“假多行”，而是总宽度 > 容器宽度（主轴方向），且子项能收缩（flex-shrink: 1）或受min-width限制触发折行 - 容器在交叉轴（垂直方向）要有明确、富余的高度约束：
height或max-height更可靠；min-height不稳定，height: auto直接让align-content失效
真要控制像素级行间距？别碰align-content，用row-gap
align-content是按比例分剩余空间的，不是设固定值。想严格留出 12px 行间空白，就该用：
-
row-gap: 12px——直接插入固定空白，和容器高度无关，也不拉伸子项 - 搭配
align-content: flex-start关闭拉伸，能让row-gap效果清晰可见 - 注意别混用：
margin-bottom和row-gap叠加会导致实际间距翻倍 - IE 完全不支持
row-gap，降级方案只能是子项设margin-bottom+ 父容器margin-bottom: -Xpx抵消，或用:not(:last-child)
子项高度不一致时，align-content会“失灵”
Flex 把每行当一个整体块来对齐，但若第一行子项高 180px、第二行只有 60px，它们的基线不同，align-content分配的“行块位置”就会看起来歪斜、错位。
- 这时别硬调
align-content：优先统一子项高度（加min-height或align-items: stretch） -
row-gap不受此影响，只要设了就生效，但视觉对齐仍可能因基线差异显得不整齐 - 若需像素级对齐，建议改用
display: grid或显式控制align-self+line-height/vertical-align
最常被忽略的是：align-content根本不是“调行距”的属性，它是“摆行位置”的。真正要控空隙，row-gap才是第一选择；而要让它生效，容器交叉轴必须有富余空间——这点比写对属性名还关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
