Flex容器gap在旧版浏览器（如Safari≤14.1、iOS Safari≤14.5、Android WebView≤76）中完全不被解析，需通过DevTools灰显、Computed面板显示not supported或getComputedStyle(el).gap返回空字符串来实锤确认；伪支持陷阱下须用@supports(grid-row-gap:0)and(row-gap:0)双条件检测，降级方案必须包含overflow:hidden、min-width:0和box-sizing:border-box三要素。
Flex容器的gap在某些移动端不工作，不是你写错了，是浏览器压根不解析它——Safari ≤14.1、iOS Safari ≤14.5、Android WebView ≤76 这些内核对 Flex 的 gap 属于“完全无视”，声明被跳过，连报错都没有。
怎么确认真是浏览器不支持，而不是CSS写错了？
别靠“看起来没效果”下结论，三步实锤：
- DevTools → Elements 面板选中容器，看 Styles 里
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;
margin-right: 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导致尺寸失控
真正容易被忽略的是：display: contents 会让所有 gap 方案（包括 polyfill）彻底失效——因为该节点已退化为透明节点，Flex 引擎不再把它当独立 item 处理。这时只能把 Flex 容器上移到它的父级，或改用真实 DOM 节点。
