唯一能绕过换行后间距翻倍的原生方案是用 gap 替代所有子项 margin 并确保容器同时声明 display: flex 和 flex-wrap: wrap；因 margin 与 gap 叠加不抵消，且 gap 对容器声明敏感、旧浏览器支持差，需 @supports 检测并 fallback。
直接用 gap 替代所有子项的 margin，并确保容器同时声明 display: flex 和 flex-wrap: wrap——这是唯一能绕过换行后间距翻倍的原生方案。
为什么 margin + gap 会翻倍？
浏览器不会自动“抵消”已存在的 margin。当你给子项设了 margin-bottom: 8px，又在容器上加 row-gap: 12px，两者叠加就是 20px，视觉上明显撑开。这不是 bug，是规范行为：gap 作用于项间，margin 仍作用于每个盒模型边界，互不感知。
- 常见迁移场景：旧代码用
margin-right做列间隔，升级时只加gap却忘了清 margin - 伪类清除（如
:nth-child(3n)）在响应式列数变化后立即失效，导致部分项 margin 残留 -
margin在换行时仍机械生效——末项带右距、下一行首项又带左距，左边空、右边挤
gap 的生效前提和写法陷阱
gap 不是“写了就有”，它对容器声明极其敏感，尤其在移动端 WebView 中表现不稳定。
- 必须同时存在：
display: flex和flex-wrap: wrap（缺一不可；仅写flex-wrap，浏览器直接忽略gap） - 优先拆开写：
row-gap: 12px+column-gap: 8px；避免gap: 12px 8px或gap: 12px简写，微信 X5 内核等旧 WebView 解析可能错乱 - 单位必须是
px、rem、em；row-gap: 5%会被浏览器静默忽略 -
row-gap在flex-direction: column下控制的是“列间距”，不是“行间距”，此时它根本不管换行
兼容老浏览器的降级方案
IE 完全不支持 gap，Safari ≤13.1 也不支持；Safari 14–15.4 存在渲染抖动或塌陷 bug。硬扛没意义，得用精准降级。
- 用
@supports (row-gap: 1px)做特性检测，再加载 fallback 样式 - 手动模拟时，别只靠
margin-right: nth-child(4n)——DOM 顺序 ≠ 视觉行末，断点一变就全乱 - 更稳的兜底是伪元素 + 负 margin：
.container { margin: -6px; }+.item { padding: 6px; }（模拟gap: 12px） - 若项目允许，直接切到
display: grid：它对gap的支持更早、更稳定，且天然按行列分离计算
真正容易被忽略的是：哪怕你只在开发环境看到“好像没问题”，只要上线后遇到 Safari 14.1 或微信内置浏览器，gap 就可能突然失效或抖动——所以特性检测不能省，fallback 不能只写在注释里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
