必须同时声明display: flex和flex-wrap: wrap，否则row-gap在换行后不生效；safari≤15.4需@supports降级；避免align-items: stretch干扰及margin与gap混用。
直接用 gap 就行，但必须同时满足 display: flex 和 flex-wrap: wrap；漏掉任一条件，row-gap 在换行后就完全不生效。
为什么写了 row-gap 却没看到行间距
这不是浏览器 bug，而是两个硬性前提没满足：
-
display: flex或display: inline-flex必须真实生效——检查 computed 样式，确认没被display: block等后续规则覆盖 -
flex-wrap: wrap（或wrap-reverse）必须显式声明；flex-wrap: nowrap下row-gap无效 - 如果用了
flex-direction: column，row-gap控制的是“列与列之间”的垂直间距，和“换行”无关——因为 column 方向根本不换行 - Safari ≤15.4 中
gap行为不稳定，建议加@supports (row-gap: 1px)做降级包裹
用 gap 还是 margin？关键看兼容性和动态性
gap 是容器级原生能力，margin 是子项样式，混用会叠加出意料之外的间距：
-
gap: 12px 8px同时控制行距和列距，不作用于容器边缘，首尾无多余空白 - 给子项加
margin-bottom: 8px再配row-gap: 12px→ 实际行距 20px，末行还多出 8px 沉底 - 响应式中用
:nth-child清 margin 完全失效——DOM 顺序 ≠ 视觉顺序，flex 换行后规则失准 - 动态插入/删除子项时，
gap自动重算间隙；margin + :not(:last-child)依赖 DOM 状态，JS 插入后可能漏匹配
必须兼容旧浏览器时，负 margin 怎么写才不翻车
不是简单套个 margin-right: -X 就完事，容易破坏换行逻辑或导致横向滚动：
- 横向布局优先用
margin-left：给第 2 个及之后的子项设margin-left: 12px，避免末尾多出空白 - 纵向布局同理，用
margin-top而非margin-bottom，再给容器加margin-top: -12px - 若子项有
border或padding，负 margin 值需包含这些尺寸，否则视觉间隙仍在 - 别用
margin-right+margin-bottom组合——右边距在换行点会错位，底部负边距又难对齐
gap 不生效的隐形干扰项：align-items 和 HTML 空白节点
即使 gap 声明正确，也可能被其他样式掩盖效果：
-
align-items: stretch（默认值）会让子项在交叉轴拉满高度，把row-gap的空白“藏”在子项内部，看起来像没起作用；改用flex-start或center才能看清真实间距 - HTML 中子项间的换行符、空格、注释会被解析为文本节点，产生约 3–4px 间隙——这跟
gap无关，删掉换行或用font-size: 0在父容器上压制 -
visibility: hidden或display: none的子项，gap不会为其保留间隙；而margin仍会占位
真正麻烦的不是怎么写 gap，而是换行后子项尺寸不固定（比如文字长度变化、图片加载延迟）导致换行点漂移——此时 gap 依然稳定，但 margin 方案容易在某几行突然多出空白或挤在一起。这种场景下，别试图用 JS 监听尺寸去 patch，老老实实升级浏览器支持范围更省心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
