row-gap生效需同时满足display: flex（或inline-flex）真实生效且flex-wrap: wrap（或wrap-reverse）显式声明；否则在换行场景下无效。
row-gap 不生效？先确认两个硬性前提
写了 row-gap 却看不到换行后的行间距，不是浏览器 bug，而是两个条件没同时满足：display: flex（或 inline-flex）必须真实生效，且 flex-wrap: wrap（或 wrap-reverse）必须显式声明。漏掉任一，row-gap 在换行场景下就完全无效。
常见干扰项：
- computed 样式里
display被后续规则覆盖成block或其他值 - 子项总宽度未超容器宽度，根本没触发换行（
flex-wrap形同虚设） - 用了
flex-direction: column—— 此时row-gap控制的是“列之间”的垂直间距，和“换行”无关
为什么换行后行距看起来“爆炸大”？align-content 在拉伸
所谓“行距变大”，大概率是 align-content: stretch（默认值）在作祟：当容器有固定高度（如 height: 300px），而所有子项加起来总高远小于它时，Flex 会把交叉轴剩余空间平均分给每一行，把每行纵向拉高——你看到的“大间距”，其实是被撑开的行高，不是插入的空白。
解决方法很简单：
- 直接设
align-content: flex-start关闭拉伸，让行顶对齐 - 再配合
row-gap: 12px设置真实、固定的行间空白 - 别用
align-content: center或stretch来“模拟”行距，它不控制像素值，只分配剩余空间
gap 和 margin 混用会翻倍出错
gap 是容器级原生能力，margin 是子项样式，两者叠加会导致意料之外的间距。例如：
-
row-gap: 12px+ 子项margin-bottom: 8px→ 实际行距变成 20px - 末行子项的
margin-bottom还会额外沉底，造成底部多出空白 - 响应式中用
:nth-child(3n)清除右距，在换行后 DOM 顺序 ≠ 视觉顺序，规则直接失效
动态增删子项时，gap 自动重算；margin + :not(:last-child) 则依赖 DOM 状态，JS 插入后极易漏匹配。
Safari ≤15.4 和 IE 的兼容处理
gap 在 Safari ≤15.4 行为不稳定，IE 完全不支持。降级方案不能简单套负 margin：
- 横向布局：给第 2 个及之后子项设
margin-left: 12px，再给容器加margin-left: -12px抵消首项左距 - 纵向布局：用
margin-top替代margin-bottom，并配margin-top: -12px抵消首行顶距 - 若子项有
border或padding，负 margin 值需包含这些尺寸，否则视觉间隙仍在 - 务必用
@supports (row-gap: 1px)包裹现代写法，避免旧浏览器解析失败
真正容易被忽略的是：gap 效果只取决于是否换行、是否有明确交叉轴尺寸，跟子项的 flex 值或内容高度无关——哪怕子项高度参差不齐，row-gap 依然稳定插入空白，而 align-content 在这种情况下反而会失准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
