gap没生效，大概率是漏了display: flex；必须同时声明display: flex和flex-wrap: wrap（或wrap-reverse），且清除子项margin、避免align-content: stretch拉伸行高，才能使row-gap: 12px真实生效。
gap没生效，大概率是漏了display: flex
写了flex-wrap: wrap和row-gap: 12px却没反应？先打开 DevTools 的 Computed 面板，确认容器的 display 值是不是 flex。很多项目只加了 flex-wrap，但父容器仍是 block 或 inline-block，此时浏览器直接忽略所有 gap 相关声明。
必须同时存在：display: flex 和 flex-wrap: wrap（或 wrap-reverse），缺一不可。
-
display: inline-flex也能让gap生效，但要注意行内容器的换行行为受父级文本流影响 - 别用
gap: 12px简写——移动端某些 WebView（如微信 X5 内核）对双值解析不稳定，优先拆成row-gap: 12px+column-gap: 8px -
row-gap: 5%会被静默忽略；单位必须是px、rem、em等绝对/相对长度
margin 和 row-gap 混用，间距直接翻倍
旧代码里给子项写了 margin-bottom: 8px，又加了 row-gap: 12px，结果行间空了 20px。这不是 bug，是叠加效果。
gap 不会覆盖或清除 margin，它只是在项与项之间“额外插入”空白。换行后，每行末尾元素仍带 margin-bottom，下一行首项又带 margin-top，视觉上就是错位+膨胀。
- 统一清掉所有子项的
margin-top、margin-bottom、margin-left、margin-right - 首尾留白改用父容器的
padding-top/padding-bottom，和gap解耦 - 如果必须保留某侧留白（比如按钮组左边缩进），用
padding-left在容器上做，而不是靠第一个子项的margin-left
align-content 在瞎拉伸，根本不是“行间距”问题
看着行与行之间空得离谱，第一反应调 row-gap？先检查容器有没有设固定高度（比如 height: 400px）。如果设了，且没改 align-content，那默认的 align-content: stretch 就在起作用——它把每一行当整体块，平均分配交叉轴剩余空间，子项被纵向撑高，不是加了间隙，是整行被拉长了。
- 想控制像素级行距，只用
row-gap；想控制多行整体在容器里的分布位置（比如首尾贴边），才动align-content - 把
align-content改成flex-start，再看row-gap是否真实生效 - 如果子项高度差异大（比如图文混排），
align-items: baseline会进一步加剧基线偏移，导致行高视觉错乱；此时应设align-items: flex-start
响应式列数一变，nth-child 就失效，别硬扛
用 .item:nth-child(3n) { margin-right: 0; } 清右距？这招在断点切换列数时立刻崩盘。DOM 顺序 ≠ 视觉行尾，:nth-child 只认 HTML 里第几个，不认哪一行结束了。
真正稳定的方案只有两个：一是用 gap（它天然无视 DOM 顺序，只管项间关系）；二是降级时用伪元素模拟，而不是靠选择器猜位置。
- 兼容 Safari ≤13.1 或 IE？别写
@supports (gap: 1px)，改用@supports (row-gap: 1px)特性检测更准 - 兜底样式推荐：
.container { margin: -6px; }+.item { padding: 6px; }（模拟gap: 12px），比margin+nth-child更可靠 - 若项目允许，
display: grid是更稳的选择：它对gap的支持早于 Flexbox，且天生按行列分离计算，末行间隙不会塌陷
真正难处理的从来不是怎么加间隙，而是怎么让浏览器相信“这一行结束了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
