Safari浏览器如何修复针对Flex布局中gap属性在旧系统上的失效？

先说一个让前端开发者集体破防的问题：当你的Flex布局在Safari 14.1及以下版本（包括iOS Safari 14.5）中突然“摆烂”，子项紧贴排列、换行错位甚至布局塌陷——别急着怀疑是样式写错了。大概率是浏览器的解析层出了问题：你写了gap: 16px，但浏览器引擎直接当作没看见。

这不是优先级或选择器权重的问题，而是gap属性在这些老旧浏览器中的CSS引擎里就是缺失的。换句话说，写了等于白写。

确认gap是否真的不被支持

怎么确认是浏览器bug而不是自己代码写错？很简单：打开DevTools的Elements面板，选中Flex容器，在Styles区域里，看gap的声明是不是灰色的，或者带删除线；接着切换到Computed面板，搜一下gap，如果值显示为空字符串或者not supported，基本就实锤了。最绝的是在Console里执行getComputedStyle(el).gap，如果返回空或者'normal'，那就不用再怀疑了。

需要注意一点，Safari 14.1有一个“伪支持”陷阱——@supports (gap: 0)会返回true，但实际渲染时依然跳过gap。所以不能依赖这种特性检测。

用负margin + 正margin模拟gap（推荐方案）

这个问题不是无解的。目前最稳妥、不依赖JavaScript、且兼容性覆盖到iOS 13.3乃至Android WebView 75的方案，就是用“负margin + 正margin”来模拟gap的效果。核心原则是：容器向外扩，子项向里缩。但操作的时候必须满足五个硬性条件，少一个就容易出现水平滚动条或布局错位。

第一步：给Flex容器加上margin-left: -8px; margin-right: -8px;。这里以目标gap值为16px举例，均分后各取一半，所以是－8px和8px。

第二步：给容器的直接子项加上margin-left: 8px; margin-right: 8px;。这样视觉上子项之间就有了16px的间距。

第三步：容器上必须加overflow: hidden;——【漏掉这句，完蛋】 没有它，容器的外扩margin会导致页面出现意外的水平滚动条，或者右侧的子项被截断。

第四步：每个子项都要加上min-width: 0; box-sizing: border-box;——【这个min-width: 0不是可有可无】 如果不加，当子项内部内容撑宽时，flex-shrink会失效，子项直接溢出容器。

第五步：用:nth-child(n+2)来清除首项左侧的间距，替代:not(:first-child)。原因在于后者在旧版Safari和Android WebView中并不被识别，而:nth-child(n+2)是通用写法。

用单向margin替代（轻量级备选）

如果你的Flex容器确定不用flex-wrap，或者明确是单行布局，那可以用更轻量的方法。代码少，但边界情况需要手动控制。

方法一：水平布局中，只给非末项加右间距。

.flex-row > *:not(:last-child) { margin-right: 12px; }

这一步很简单，直接把选择器复制到CSS里就行。

方法二：水平布局中，只给非首项加左间距。这招兼容性更强，但需要配合.flex-row > *:first-child { margin-left: 0; }一起用，否则首项可能继承父级的默认边距。

.flex-row > *:nth-child(n+2) { margin-left: 12px; }

另外，如果子项有border或者padding，需要在计算margin值时预留空间，否则视觉上的间距会不准。推荐统一使用CSS自定义属性来管理，比如--gap: 12px，方便后续响应式调整。

双条件@supports检测兜底（仅限需要渐进增强的项目）

如果你的项目需要区分哪些浏览器原生支持gap、哪些需要降级处理，那唯一可靠的检测方式就是组合grid-row-gap与row-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; }
}

说实话，这个检测能准确避开Safari 14.1的伪支持干扰，但维护成本确实不低。如果你的项目明确只支持Safari 14.1及以上版本，那直接用原生gap就行。否则，建议全局采用上面的负margin方案，并通过PostCSS插件自动注入兼容代码，省心省力。