旧版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，不是“失效”，是直接跳过——写了等于没写。你看到子项紧贴、换行错位、甚至布局塌陷，大概率就是这个原因。
怎么确认 gap 真的不被支持
别猜，直接验证：
- 打开 DevTools → Elements 面板，选中设置了
display: flex和gap的容器 - 如果
gap在 Styles 里显示为灰色或带删除线，说明浏览器不认识它 - 切到 Computed 面板，搜
gap，若值为空字符串或normal，就是未生效 - 在 Console 里运行
getComputedStyle(el).gap，返回空也意味着不支持
用负 margin + 正 margin 模拟 gap 的实操要点
核心思路是：容器外扩，子项内缩，靠抵消实现视觉间隙。但 Safari ≤14.1 对负 margin 的 overflow 计算有 bug，必须加防护：
- Flex 容器必须加
overflow: hidden，否则可能触发意外水平滚动条或截断右侧子项 - 每个子项必须加
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)—— 旧版 Safari 和 Android WebView 不支持，改用:nth-child(n+2)
@supports 检测不能只写 (gap: 0)
Safari 14.1 是“伪支持”陷阱：它对 @supports (gap: 0) 返回 true，但实际在 flex 容器中仍忽略 gap。结果就是降级逻辑被绕过，布局直接错乱。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
必须用双条件检测，才能准确排除：
@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;
}
}
真正容易被忽略的边界情况
即便你把上面所有防护都加上，还有三个点常被漏掉：
- 如果 Flex 子项用了
display: contents（比如为了语义化包裹），那gap和它的降级方案都会失效——因为该节点已退化为透明节点，Flex 引擎不再把它当独立 item 处理 - 容器设了
justify-content: space-between或center时，直接加margin会破坏对齐逻辑，此时应改用嵌套 wrapper 或伪元素占位 -
flex-wrap: wrap下，负 margin 模拟方案无法自动识别“每行首项”，必须配合:nth-child(3n+1)类选择器手动清除左 margin（列数可变时更麻烦）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
