必须用“容器负margin+子项正padding”而非仅margin，因后者破坏justify-content对齐且换行后首尾多空白；该方案通过父子边距抵消保持flex流完整、间隙稳定，并需同时满足overflow:hidden、min-width:0、box-sizing:border-box、间隙均分四条件。
老版浏览器（Safari ≤14.1、Chrome ≤83、IE 全系）压根不解析 gap，不是渲染错位，是样式被跳过——直接上负 margin + padding 是最可控、零 JS、无构建依赖的 fallback 方案。
为什么必须用“容器负 margin + 子项正 padding”而不是只加 margin
只靠 margin-left 或 margin-right 模拟间隙，会破坏 justify-content: space-between 等对齐逻辑，且换行后首尾多出空白；而负 margin 抵消方案能保持 flex 流完整，视觉间隙稳定：
- 容器设
margin-left: -8px; margin-right: -8px（对应目标gap: 16px） - 每个子项设
padding-left: 8px; padding-right: 8px - 父子边距抵消后，内容区宽度不变，布局流不受扰
- 该方案在 Safari 13.3、Chrome 80、Android WebView 75 下均可靠
四个硬性条件缺一不可
漏掉任意一条，轻则间隙不准，重则子项溢出、水平滚动条意外出现：
-
overflow: hidden必须加在 flex 容器上，否则负 margin 触发横向滚动 - 每个子项必须显式写
min-width: 0—— 这是最常被忽略的一点，flex 子项默认min-width: auto，加了 padding 后极易撑破容器 - 每个子项必须设
box-sizing: border-box，否则padding+border会让尺寸失控 - 间隙必须均分：左右/上下 padding 值严格等于
gap / 2，不能四舍五入或混用单位
flex-wrap 换行后首行/首列多出一倍间隙怎么办
这不是 bug，是负 margin 和 padding 在换行时自然叠加的结果。解决方式取决于布局方向：
- 水平换行（
flex-direction: row; flex-wrap: wrap）：用:nth-child(3n+1)清除每行首项的padding-left（假设每行 3 个） - 垂直换行（
flex-direction: column; flex-wrap: wrap）：用:nth-child(2n+1)清首列padding-top - 子项若含
display: none，其padding仍占位 —— 得用 JS 移除 class，或改用visibility: hidden+position: absolute
实际写法示例与避坑点
以水平间隙 gap: 12px 为例：
.container {
display: flex;
overflow: hidden;
margin-left: -6px;
margin-right: -6px;
}
.container > * {
padding-left: 6px;
padding-right: 6px;
min-width: 0;
box-sizing: border-box;
}
关键避坑点：
- 子项不能自带干扰性
margin，否则要额外重置：margin: 0 - 不要用
:not(:first-child)，它在 iOS Safari 13.x 和 Android WebView 75 下不生效，必须用:nth-child(n+2) - 如果子项有
border，确保box-sizing: border-box已生效，否则padding + border会撑大宽度
真正容易被忽略的永远是 min-width: 0 —— 它几乎从不被主动写，但一旦漏掉，在旧 Safari/Chrome 中，子项内容稍长就会溢出容器，布局瞬间崩坏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
