原生gap在Safari≤14.1、iOS Safari≤14.5、IE全系及部分Chrome版本中不支持，需用负margin+padding模拟，且必须同时满足四条件：overflow:hidden、min-width:0、box-sizing:border-box、间隙均分。
原生 gap 在 Safari ≤14.1、iOS Safari ≤14.5、IE 全系、Chrome getComputedStyle(el).gap 验证返回值是否为 '' 或 'normal'。
怎么快速确认浏览器是否支持 flex gap
三步实锤，不靠猜：
- DevTools → Elements 面板选中 flex 容器，
gap在 Styles 里显示灰色或带删除线 - Computed 面板搜索
gap，值为空字符串''或标着not supported - 控制台执行
getComputedStyle(el).gap，返回''或'normal'
特别注意：Safari 14.1 是“伪支持”陷阱——@supports (gap: 0) 返回 true，但实际在 flex 容器中仍静默忽略，换行时布局直接错位。
用 margin-left + :nth-child(n+2) 模拟水平间隙
这是兼容性最好、零 JS、无 polyfill 的 fallback 方案，适用于 flex-direction: row 场景：
立即学习“前端免费学习笔记（深入）”；
- 只给非首项加左外边距，避免换行后末尾多出空白；必须用
:nth-child(n+2)，:not(:first-child)在 iOS Safari 13.x 和 Android WebView 75 不生效 - 子项必须设
flex-shrink: 0，否则内容长时子项收缩，margin-left会“吃掉”文字或图标 - 间隙值统一走 CSS 自定义属性（如
--gap: 12px），方便后续响应式调整 - 若子项有
border或padding，要在margin-left值里预留空间，否则视觉间隙不准
示例：
.flex-row { display: flex; }
.flex-row > * { margin-left: var(--gap); flex-shrink: 0; }
.flex-row > *:nth-child(1) { margin-left: 0; }用负 margin + padding 模拟 gap 的硬性条件
该方案视觉更稳，但落地门槛高，四点必须同时满足，缺一不可：
- flex 容器加
overflow: hidden（否则负margin触发意外水平滚动） - 每个子项加
min-width: 0（默认min-width: auto，加padding后极易撑破容器） - 每个子项加
box-sizing: border-box（避免padding+border导致尺寸失控） - 间隙均分：容器设
margin-left: -8px; margin-right: -8px，子项设padding-left: 8px; padding-right: 8px（对应目标gap: 16px）
真正容易被忽略的是 min-width: 0——它几乎从不被主动写，但在旧 Safari/Chrome 中，一旦漏掉，子项内容稍长就会溢出容器，布局立刻崩坏。
flex-wrap 下 margin 或 padding 方案失效怎么办
水平 flex-wrap: wrap 时，margin-left 会导致换行后首项左侧多出一倍间隙；纯 CSS 很难精准清除每行末项。这时有两个更可靠的选择：
- 改用
display: inline-block+font-size: 0消除空白符，再对子项设vertical-align: top和margin——兼容性极好，但失去 Flex 的对齐能力 - 轻量 JS 补齐：遍历容器子项，用
getBoundingClientRect()判断换行位置，在每行末尾后插入占位<div class="gap-filler"></div>，并监听resize
如果项目已用 PostCSS，直接上 flex-gap-polyfill 插件，构建时自动转成带 calc() 和 CSS 变量的兼容代码，零运行时开销。
