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

Safari ≤14.1/iOS Safari ≤14.5中gap属性被完全忽略，需用负margin+正margin模拟：容器外扩、子项内缩，并满足overflow:hidden、min-width:0等五项硬性条件。

在Safari ≤14.1或iOS Safari ≤14.5中，Flex容器的gap属性被浏览器CSS引擎完全忽略，子项紧贴排列、换行错位甚至布局塌陷，这不是样式写错或优先级问题，而是解析层缺失——写了gap: 16px等于没写。

确认gap是否真的不被支持

打开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（推荐方案）

这是目前最稳定、无需JS、兼容性覆盖至iOS 13.3及Android WebView 75的方案，核心是“容器外扩、子项内缩”，但必须满足四个硬性条件才能避免滚动条、塌陷或错位：

第一步：给Flex容器添加margin-left: -8px; margin-right: -8px;（以目标gap: 16px为例，均分后取半）

第二步：给容器直接子项添加margin-left: 8px; margin-right: 8px;

第三步：在容器上强制添加overflow: hidden;——【漏掉这句会导致意外水平滚动条或右侧子项被截断】

第四步：给每个子项添加min-width: 0; box-sizing: border-box;——【min-width: 0不可省略，否则内容撑宽时flex-shrink失效，子项溢出容器】

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

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

适用于无flex-wrap或确定单行场景，代码更少，但需手动控制边界：

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

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

这一步操作起来很简单，直接把选择器复制进CSS就行。

方法二：水平布局只给非首项加左间距（兼容性更强）

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

必须配合.flex-row > *:first-child { margin-left: 0; }，否则首项可能继承父级默认边距。

注意：若子项含border或padding，需在margin值中预留空间，否则视觉间隙不准；同时建议统一使用CSS自定义属性如--gap: 12px管理数值，便于后续响应式调整。

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

若必须区分原生支持与降级环境，唯一可靠的检测方式是组合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插件自动注入兼容代码。