旧版Safari≤14.1完全不解析gap属性，需用margin降级并强制设置overflow:hidden、min-width:0、box-sizing:border-box及半分间隙值，且须用:nth-child(n+2)替代:not(:first-child)确保兼容性。
旧版 Safari（≤14.1）压根不解析 gap，写了等于没写——不是 bug，是规范未实现。直接上 margin 降级方案最可靠，但漏掉 min-width: 0 或 overflow: hidden 就会出滚动条或布局塌陷。
怎么确认 gap 真的不被支持
别靠猜，用 DevTools 实锤：
- Elements 面板中选中 flex 容器，看
gap是否显示为灰色或带删除线 - Computed 面板搜
gap，值为空字符串''或normal就说明未生效 - Console 执行
getComputedStyle(el).gap，返回空也说明浏览器不认识它 -
@supports (gap: 0)在 Safari 14.1 下会误判为true，不可信
用 margin-left + :nth-child(n+2) 模拟水平 gap
这是兼容性最好、落地最稳的写法，绕开 :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 .item { margin-left: var(--gap); flex-shrink: 0; }
.flex-row .item:nth-child(1) { margin-left: 0; }
用负 margin 模拟 gap 时必须满足的四要素
核心是“容器外扩、子项内缩”，但 Safari ≤14.1 对 overflow 计算有 bug，缺一不可：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- Flex 容器加
overflow: hidden，否则负 margin 可能触发意外水平滚动条或截断右侧子项 - 每个子项加
min-width: 0，否则内容撑宽时破坏flex-shrink行为 - 每个子项加
box-sizing: border-box，避免padding+border导致尺寸失控 - 间隙值按半分：目标
gap: 16px→ 容器设margin-left: -8px;margin-right: -8px，子项设margin-left: 8px;margin-right: 8px
flex-wrap 场景下怎么避免换行错位
纯 margin 方案无法区分“行内间隔”和“行间间隔”，尤其当每行数量不固定时：
- 水平布局（
flex-direction: row; flex-wrap: wrap）：假设每行 3 个，用.flex-row .item:nth-child(3n+1)清除每行首项的margin-left - 垂直布局（
flex-direction: column; flex-wrap: wrap）：用:nth-child(2n+1)清首列margin-top - 若项目已引入 PostCSS，可用
postcss-gap-properties插件自动补全 - 服务端渲染（SSR）中若子项数量 hydrate 前后不一致，建议加
data-hydrated类做过渡控制
真正容易被忽略的是 min-width: 0：flex 子项默认 min-width: auto，加上 padding 或 margin 后极易溢出容器，尤其在响应式窄屏下——哪怕你把其他所有防护都加上，漏掉它，布局就可能在 iOS 14.5 设备上突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
