align-content: stretch 默认拉伸各行填满交叉轴剩余空间，导致行高异常增大、视觉“间距爆炸”；真正控制像素级行距应使用row-gap，且需满足flex-wrap: wrap和容器有明确高度等条件。
align-content: stretch 是默认值，它会让每一行都拉伸填满容器交叉轴方向的全部剩余高度——不是加了间距，是整行被纵向撑高了。
为什么 align-content: stretch 会让行看起来“空得离谱”
当容器有固定高度（比如 height: 400px），而所有子项实际总高度远小于这个值时，align-content: stretch 就会把每一行当作一个整体块，平均分配交叉轴上的剩余空间。结果就是：每行被强制拉高，子项随之被撑开，视觉上像“行间距爆炸”。
- 打开 DevTools → Elements → Computed，检查容器的
height和content height；如果前者明显大于后者，align-content: stretch就在生效 - 子项若设了
align-self: stretch或没显式设align-items（继承父级stretch），会进一步加剧拉伸 - 某行里有个图片没设
height，该行基线偏移，拉伸后更显错位，容易误判为“间距不均”
row-gap 才是真正控制像素级行间距的属性
row-gap 在行与行之间插入固定空白，和容器高度无关，也不拉伸子项。它和 align-content 功能完全不同：align-content 控制的是“多行整体怎么摆”，row-gap 控制的是“行与行之间空多少”。
- 优先写成
row-gap: 12px，而不是简写gap: 12px；移动端某些 WebView 对双值gap解析不稳定 - 必须同时声明
display: flex和flex-wrap: wrap，否则row-gap不生效 - 别混用
margin-bottom和row-gap，否则间距叠加（例如margin-bottom: 8px+row-gap: 12px= 实际 20px）
为什么有时改了 align-content 还没反应
align-content 不是万能开关，它只在三个硬性条件同时满足时才起效：
- 容器是
display: flex且flex-wrap: wrap（或wrap-reverse） - 子项真实换行（主轴总尺寸 > 容器主轴尺寸），不能靠
flex-basis硬撑出来的“假多行” - 容器在交叉轴方向有明确且富余的高度约束（
height或max-height；min-height不够稳，height: auto则直接失效）
调试时最容易忽略的一点
很多“行间距变大”的问题，其实根本不是 gap 或 align-content 的锅，而是 align-items: baseline（或继承自全局样式）触发了基线对齐语义——此时每行子项的基线被强制拉到同一水平线，而基线位置由字体度量、line-height、内联结构共同决定，视觉上就表现为行高被“撑开”。这种情况下，row-gap 能加空白，但无法修正基线偏移带来的错位感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
