Flex换行后行间距“过大”是align-content: stretch默认拉伸整行所致，它将交叉轴剩余高度均分给各行，撑开子项造成视觉错觉；应改用align-content: flex-start关闭拉伸，再配合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效果清晰可见 - IE 完全不支持
row-gap，降级方案只能是子项设margin-bottom+ 父容器margin-bottom: -Xpx抵消，或用:not(:last-child) - 注意别混用：
margin-bottom和row-gap叠加会导致实际间距翻倍
子项高度不一致时，align-content 会“失灵”
Flex 把每行当一个整体块来对齐，但若第一行子项高 180px、第二行只有 60px，它们的基线不同，align-content 分配的“行块位置”就会看起来歪斜、错位。
- 这时别硬调
align-content：优先统一子项高度（加min-height或align-items: stretch） - 或者直接改用
display: grid，它对行列间距的控制更正交、更稳定 - 如果必须用 Flex，就放弃“行块对齐”，只靠
gap+justify-content控制主轴分布
最常被忽略的一点：你看到的“行间距大”，90% 是 align-content: stretch 在拉伸，而不是什么神秘 margin；关掉它，再决定要不要加 row-gap，比反复试 space-between 有效得多。
