row-gap生效需同时满足display: flex和flex-wrap: wrap（或wrap-reverse），单行flex或column方向下无效；常见错误包括漏写display、误用align-content、margin与row-gap叠加及末尾留白问题。
row-gap不生效？先确认flex-wrap和display同时存在
很多情况下写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-content不是行间距控制开关，别用它设像素值
align-content 控制的是多行整体在交叉轴上的分布逻辑，不是插入固定空白。它只在三个硬性条件同时满足时才起效：display: flex + flex-wrap: wrap + 容器在交叉轴方向有明确且富余的高度（如 height: 300px）。若容器高度是 auto，或子项根本没真正换行，align-content 直接不生效。
容易踩的坑：
-
align-content: stretch（默认值）会把每行拉高填满剩余空间，造成“行距爆炸”错觉，实际是子项被纵向撑开 - 误把
align-content: space-between当成row-gap使用，结果行块位置被重排，但两行之间并无固定像素空白 - 混用
row-gap和align-content: space-between：浏览器会把row-gap的空白也纳入“剩余空间”再分配，最终效果不可控
margin 和 row-gap 叠加导致间距翻倍
row-gap 只负责插入固定像素空白，它不会自动清除已有 margin。给子项写了 margin-bottom: 8px，又加了 row-gap: 12px，结果垂直方向实际间距就是 20px——浏览器不会帮你去重。
正确做法：
- 清掉所有子项的
margin-top、margin-bottom、margin-right - 首尾留白改用容器的
padding-top/padding-bottom，和gap解耦 - 响应式场景下，别用
:nth-child(4n)清除margin—— flex-wrap 换行后 DOM 顺序 ≠ 视觉顺序，规则立即失效 - 若必须兼容 IE 或旧 Safari，优先用伪元素 + 负 margin：
.container { margin: -6px; }+.item { padding: 6px; }（模拟gap: 12px）
最后一行间距不均？gap 本身不覆盖末尾空白
gap 只在相邻项目间生效，末尾区域无对应“下一个元素”，所以最后一行右侧或底部常留白过大。这不是 bug，是设计行为。
解决方式：
- 主轴对齐改用
justify-content: flex-start（默认）或center，避免space-between在可换行容器中加剧不均 - 伪元素补位：
.container::after { content: ""; flex: auto; }+justify-content: space-between，让伪元素占位参与等分 - 更稳的长期方案是切到
display: grid：grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))+gap: 12px，Grid 对 gap 的支持更早、更稳定，且天然覆盖末尾间隙
flex-wrap 真的触发了吗？容器交叉轴高度是不是 auto？你到底想控制的是“行块位置”（align-content）还是“两行之间固定多少像素”（row-gap）？混用二者会让布局行为变得极难预测——尤其当子项高度不一致时，align-content 的“行块”概念会彻底失焦。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
