如何让CSS的flex-gap在低版本Safari中兼容？

旧版Safari（≤14.1）完全不解析gap属性，需用双条件@supports (grid-row-gap: 0) and (row-gap: 0)检测，并以负margin+正margin模拟间隙，同时强制设置overflow: hidden、min-width: 0、box-sizing: border-box及半分值。

旧版 Safari（≤14.1）压根不解析 gap，写了等于没写——不是渲染错位，是声明被跳过、无报错、DevTools 里灰显或值为空。必须用负 margin + 正 margin 模拟，且四项条件缺一不可。

怎么确认 gap 真的不被支持

别靠“没看到间隙”下结论，三步实锤：

1. DevTools → Elements 面板选中容器，gap 声明显示为灰色或带删除线
2. Computed 面板搜索 gap，返回空字符串 "" 或标着 not supported
3. 控制台执行 getComputedStyle(el).gap，结果是 "" 或 "normal"

排除伪失效：检查是否漏了 display: flex，拼写是否为 gab，单位是否缺失（如 gap: 12 而非 gap: 12px），子项是否用了 display: contents。

@supports (gap: 0) 是个陷阱，别信

Safari 14.1 会返回 true，但只在 Grid 中生效；Flex 容器里的 gap、row-gap、column-gap 全部静默忽略。

真正能避开误判的检测方式是双条件：

@supports (grid-row-gap: 0) and (row-gap: 0) {.flex-container { gap: 16px; }}@supports not ((grid-row-gap: 0) and (row-gap: 0)) {.flex-container {margin-left: -8px;margin-right: -8px;overflow: hidden;}.flex-container > * {margin-left: 8px;margin-right: 8px;min-width: 0;box-sizing: border-box;}}

注意：min-width: 0 是最容易被漏掉的关键声明——没有它，含长文本或图片的子项会撑破容器，触发横向滚动。

用 margin 模拟 gap 的硬性条件

纯 CSS fallback 必须同时满足以下四点，否则旧 Safari 里大概率出现滚动条、换行错位或内容截断：

1. Flex 容器加 overflow: hidden，否则负 margin 可能触发意外水平滚动条或截断右侧子项
2. 每个子项加 min-width: 0，否则内容撑宽时破坏 flex-shrink 行为
3. 每个子项加 box-sizing: border-box，避免 padding + border 导致尺寸失控
4. 间隙值按半分：目标 gap: 16px → 容器设 margin-left: -8px; margin-right: -8px，子项设 margin-left: 8px; margin-right: 8px
5. 清除首项 margin 别用 :not(:first-child)——旧版 Safari 和 Android WebView 不支持，改用 :nth-child(n+2)

为什么不用 padding 替代 margin

用容器负 margin + 子项正 padding 看似更干净，但落地时三类问题高频出现：

1. flex-wrap: wrap 下，换行后首项会多出顶部/左侧 padding——得手动用 :nth-child(3n+1) 清除（假设每行 3 个）
2. 子项若有 border，padding + border 易撑破容器宽度，必须配 box-sizing: border-box
3. 子项设 display: none 时，padding 仍占位，视觉间隙错乱，需 JS 同步移除 class 或改用 visibility: hidden + position: absolute

真正容易被忽略的是 min-width: 0：flex 子项默认 min-width: auto，加上 padding 或 margin 后极易溢出容器，尤其在响应式窄屏下。这个值几乎从不被主动写，但它决定了内容是否会被强制截断或触发意外换行——哪怕你把其他所有防护都加上，漏掉它，布局就可能在 iOS 14.5 设备上突然崩掉。