原生gap在safari≤14.1、ios safari≤14.5、ie全系、chrome中不支持，需依赖polyfill或降级方案实现兼容。
原生 gap 在 Safari ≤14.1、iOS Safari ≤14.5、IE 全系、Chrome 浏览器解析器直接忽略——不是渲染错，是压根不认。别浪费时间加前缀或调样式权重，得用兼容方案。
怎么快速确认是不是浏览器不支持gap
别猜，三步实锤：
- DevTools → Elements 面板中选中 flex 容器，
gap显示灰色或带删除线 - Computed 面板搜
gap，值为空字符串''或标着not supported - 控制台执行
getComputedStyle(el).gap，返回''或'normal'
特别注意：Safari 14.1 是“伪支持”陷阱——@supports (gap: 0) 会返回 true，但实际在 flex 容器里仍跳过声明，换行时布局直接错位。
手动写 margin fallback 最稳的写法
用 :nth-child(n+2) 给非首项加左/上边距，比 :not(:first-child) 兼容性更好（后者在 iOS Safari 13.x 和 Android WebView 75 不生效）：
.flex-row { display: flex; }
.flex-row > * { margin-left: var(--gap); flex-shrink: 0; }
.flex-row > *:nth-child(1) { margin-left: 0; }
关键点：
- 必须设
flex-shrink: 0，否则内容长时子项收缩，margin-left会“吃掉”文字或图标 - 间隙值统一走 CSS 自定义属性（如
--gap: 12px），方便后续响应式调整 - 子项若有
border或padding，要在margin-left值里预留空间，否则视觉间隙不准
flex-wrap 场景下 margin 方案失效怎么办
水平 flex-wrap: wrap 时，margin-right 会导致换行后首项左侧多出一倍间隙；纯 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 变量的兼容代码，零运行时开销
负 margin + padding 方案的硬性条件
手动模拟 gap: 16px 时，必须同时满足四点，否则在旧 Safari 里大概率出滚动条或布局塌陷：
- 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
真正容易被忽略的是 min-width: 0 和 overflow: hidden —— 它们不参与视觉表现，但漏掉任何一个，旧版 Safari 或 Android WebView 就会立刻暴露布局崩坏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
