真正控制像素级行间距该用 row-gap；align-content: stretch 会拉伸每行填满容器交叉轴剩余空间，导致行高异常，而 row-gap 才是在两行间插入固定空白的属性。
行间距“过大”基本不是加了什么间距，而是 align-content: stretch（默认值）在把每行纵向拉高填满容器交叉轴剩余空间——你看到的不是空白，是被撑开的行块。
为什么 align-content 会让行看起来空得离谱
当容器有固定高度（比如 height: 400px），而所有子项实际总高只有 150px 时，align-content: stretch 会把剩余 250px 平均分给每一行，导致每行被强制拉高、子项随之撑开。打开 DevTools → Computed，对比容器的 height 和 content height：前者明显大于后者，就是它在生效。
-
align-items: stretch（父级默认）会加剧这种拉伸，尤其子项没设height或min-height - 某行里有图片没设
height，该行基线偏移，拉伸后错位更明显，容易误判为“行距不均” -
align-content只在三个条件同时满足时才起效：display: flex+flex-wrap: wrap+ 容器在交叉轴（垂直方向）有明确且富余的高度（如height或max-height）；height: auto或没设高度，它就完全不工作
真正控制像素级行间距该用 row-gap
row-gap 才是在两行之间插入固定空白的属性，和容器高度无关，也不拉伸子项。它和 align-content 功能完全不同：align-content 控制的是“多行整体怎么摆”，row-gap 控制的是“行与行之间空多少像素”。
- 必须同时声明
display: flex和flex-wrap: wrap，否则row-gap不生效 - 优先写成
row-gap: 12px，别用gap: 12px简写——移动端某些 WebView（如微信 X5 内核）对双值解析不稳定 - 清除子项所有
margin，否则margin-bottom和row-gap叠加会导致实际间距翻倍 - 单位必须是
px、rem、em；row-gap: 5%会被浏览器静默忽略
align-content 和 row-gap 能不能一起用
可以共存，但容易互相干扰。例如容器设了 height: 400px，row-gap: 12px 插入的空白也会被 align-content: space-between 当作“剩余空间”的一部分重新分配，最终行位置难以预测。
立即学习“前端免费学习笔记（深入）”；
- 想稳定控制行间像素距离，优先只用
row-gap，并让容器高度由内容撑开（即不设height） - 若必须用
align-content（比如需要首尾贴边），先设align-content: flex-start关闭拉伸，再单独调row-gap - 子项高度差异大时（如图文混排），
align-content的“行块”概念会失焦——此时统一min-height或用aspect-ratio约束图片，比硬调align-content更可靠
最常被忽略的一点：调试前先确认三件事——flex-wrap 真的触发了吗？容器交叉轴高度是不是 auto？你到底想控制的是“行块位置”还是“两行之间固定多少像素”？混用二者会让布局行为变得极难预测。
