旧版Safari（≤14.1）完全不解析gap属性，需用负margin+正margin模拟并强制设置overflow:hidden、min-width:0、box-sizing:border-box及半分间隙值，且须用:nth-child(n+2)替代:not(:first-child)以确保兼容性。
旧版 Safari（≤14.1）压根不解析 gap，写了等于没写——不是 bug，是规范未实现。直接上负 margin 方案最可靠，但漏掉 overflow: hidden 或 min-width: 0 就会出滚动条或布局塌陷。
怎么确认 gap 真的不被支持
别靠猜，用 DevTools 实锤：
- Elements 面板中选中 flex 容器，看
gap是否显示为灰色或带删除线 - Computed 面板搜
gap，值为空字符串''或normal就说明未生效 - Console 执行
getComputedStyle(el).gap，返回空也说明浏览器不认识它 - 注意：
@supports (gap: 0)在 Safari 14.1 下会误判为 true，不可信
用负 margin + 正 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 - 别用
:not(:first-child)清首项 margin——旧版 Safari 和 Android WebView 不支持，改用:nth-child(n+2)
为什么不用 padding 替代 margin
用容器负 margin + 子项正 padding 看似更干净，但落地时三类问题高频出现：
立即学习“前端免费学习笔记（深入）”；
-
flex-wrap: wrap下，换行后首项会多出顶部/左侧 padding——得手动用:nth-child(3n+1)清除（假设每行 3 个） - 子项若有
border，padding+border易撑破容器宽度，必须配box-sizing: border-box - 子项设
display: none时，padding仍占位，视觉间隙错乱，需 JS 同步移除 class 或改用visibility: hidden+position: absolute
真正容易被忽略的是 min-width: 0
flex 子项默认 min-width: auto，加上 padding 或 margin 后极易溢出容器，尤其在响应式窄屏下。这个值几乎从不被主动写，但它决定了内容是否会被强制截断或触发意外换行——哪怕你把其他所有防护都加上，漏掉它，布局就可能在 iOS 14.5 设备上突然崩掉。
