Safari ≤14.1等旧浏览器不解析gap，需三步实锤：DevTools中gap灰显或带删除线、Computed面板值为空或not supported、getComputedStyle(el).gap返回""或"normal"；@supports (gap: 0)不可靠，应改用@supports (grid-row-gap: 0) and (row-gap: 0)双条件检测，并配合overflow: hidden、min-width: 0、box-sizing: border-box降级。
不是你写错了，是 Safari ≤14.1、iOS Safari ≤14.5、Android WebView ≤76 这些浏览器压根不解析 gap —— 声明被跳过，连报错都不会有。
怎么实锤确认是浏览器不支持，而不是 CSS 写错了
别靠“看起来没效果”下结论，三步验证：
- DevTools → Elements 面板选中 Flex 容器，看
gap是否灰显或带删除线 - Computed 面板搜索
gap，值为空字符串""或标着not supported - 控制台运行
getComputedStyle(el).gap，返回""或"normal"
排除伪失效：检查是否漏了 display: flex（inline-flex 也行），有没有拼错成 gab，单位是否缺失（如写 gap: 12 而非 gap: 12px），子项是否用了 display: contents 破坏盒模型。
@supports (gap: 0) 在 Safari 14.1 是个伪支持陷阱
Safari 14.1 对 @supports (gap: 0) 返回 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;
min-width: 0;
box-sizing: border-box;
}
}
单写 @supports (gap: 0) 就会掉坑里，降级逻辑被跳过，布局直接错乱。
用 margin 模拟 gap 时最容易漏掉的三个声明
哪怕手写降级方案，以下三项缺一不可，否则旧 Safari 里会出滚动条、换行错位或内容截断：
-
overflow: hidden加在 Flex 容器上——Safari 对负margin的overflow计算有 bug -
min-width: 0加在每个子项上——防止内容撑宽破坏flex-shrink行为 -
box-sizing: border-box加在子项上——避免padding+border导致尺寸失控
真正容易被忽略的是 min-width: 0：它几乎从不被主动写，但一旦子项含长文本或图片，没它就会溢出容器、触发横向滚动——哪怕其他所有防护都加上，漏掉它，布局就可能在 iOS 14.5 设备上突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
