flex-wrap换行后row-gap不生效，需同时声明display: flex和flex-wrap: wrap；单行或column方向下row-gap无效；align-items: stretch会干扰视觉效果；避免margin与gap混用；响应式中应分开设置row-gap和column-gap。
flex-wrap换行后row-gap不生效？先检查display和flex-wrap是否同时存在
很多情况下写row-gap: 12px却没效果，不是属性写错了，而是父容器漏了关键声明。必须同时满足：display: flex + flex-wrap: wrap（或wrap-reverse），row-gap才会作用于行与行之间。单行flex下row-gap完全无效；如果用了flex-direction: column，那row-gap控制的是“列与列之间”的垂直间距，和“换行”无关——因为column方向本来就不换行。
常见错误：
- 只写了
gap: 12px，但容器是display: block或inline-flex→ 不支持gap - 写了
flex-wrap: wrap，但忘了display: flex→ 浏览器直接忽略gap - 在Safari ≤15.4中用了gap，却没加
@supports (row-gap: 1px)做降级 → 渲染错位或行高塌陷
为什么看着“行距没起作用”？其实是align-items: stretch在干扰视觉
row-gap只负责插入固定像素的空白，它不拉伸、不重排、不压缩子项。但默认align-items: stretch会让所有子项在交叉轴（通常是高度方向）被拉满，导致第一行底部到第二行顶部的距离=子项高度+row-gap，而人眼容易把“子项被拉高”误认为“行距失效”。
解决方法：
- 把
align-items设为flex-start或center，让子项按内容高度自然排列，此时row-gap的空白会清晰可见 - 不要用
align-content: space-between试图“撑开行距”——它只是把行块整体分布到容器两端，不是加空白，且在容器高度由内容撑开时完全无效 - 确认子项没设
height: 100%或min-height等强制高度样式，否则会掩盖gap的真实效果
gap和margin混用导致间距翻倍？这是最常踩的隐形坑
给子项写了margin-bottom: 8px，又给容器加了row-gap: 12px，结果垂直方向实际间距是20px——浏览器不会帮你去重，它就老老实实叠加。更糟的是，末行子项的margin-bottom还会额外多出8px，造成底部下沉。
正确做法：
- 清掉所有子项的
margin（尤其是margin-top/margin-bottom/margin-right） - 首尾留白改用容器的
padding-top/padding-bottom，和gap解耦 - 响应式场景下，别用
:nth-child清除margin——flex-wrap换行后DOM顺序≠视觉顺序，规则完全失效 - 若必须兼容IE或旧Safari，降级方案优先用伪元素+负margin，而不是保留margin再覆盖
响应式中gap要动态调？别用gap简写，分开写row-gap和column-gap
gap: 1rem 1.5rem这种简写在媒体查询里很危险：你改gap: 0.75rem 1.25rem时，得同时记住顺序是row-gap column-gap，一不小心就把行列值写反了。而且一旦某断点只调行距不调列距，简写反而要重复整条声明。
推荐写法：
- 基础层：
row-gap: 1rem; column-gap: 1.5rem; - 小屏适配：
@media (max-width: 768px) { .container { row-gap: 1.25rem; } }—— 只动需要的部分 - 注意单位：gap不支持百分比，
row-gap: 5%会被浏览器静默忽略，必须用px、rem、em - Grid布局下gap更稳，尤其当列数不固定时（如
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))），gap天然规避flex-wrap换行时机不确定带来的错位
真正难的不是写对gap，而是意识到：只要子项有任意一个margin、容器少一个flex声明、或者在旧Safari里没做特性检测，整个间距逻辑就会无声崩塌。这些地方不报错，但布局已经歪了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
