safari 14.1存在gap伪支持陷阱：@supports (gap: 0)误判为true，但flex中gap仍被忽略；应改用@supports (grid-row-gap: 0) and (row-gap: 0)双条件检测，同时必须为容器加overflow: hidden、子项加min-width: 0和box-sizing: border-box以确保降级稳定。
gap 在 Safari 14.1 以下（含 iOS Safari ≤14.5）完全不解析，不是“失效”，是浏览器引擎压根跳过该声明——polyfill 不是可选项，而是生产环境的必要兜底。
为什么 @supports (gap: 0) 检测在 Safari 14.1 会误判
Safari 14.1 声称支持 gap，但只在 display: grid 中生效，对 flex 容器中的 gap、row-gap 或 column-gap 仍忽略。更糟的是，它对 @supports (gap: 0) 返回 true，导致降级逻辑被绕过。
实操建议：
- 不要单独用
@supports (gap: 0)判断 Flex 场景 - 改用
@supports (grid-row-gap: 0) and (row-gap: 0)—— Safari 14.1 支持前者但不支持后者，能准确排除 - 若项目同时用 Grid 和 Flex，必须双条件检测，否则首屏布局直接错乱
PostCSS flex-gap 插件比手写 margin 更可靠
手动写 margin-left: 12px + :nth-child(1) 看似简单，但在动态插入子项、嵌套 Flex、或使用 justify-content: space-between 时极易崩坏。PostCSS 插件（如 postcss-flex-gap）能自动处理这些边界：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 将
gap: 1rem编译为容器margin: -0.5rem+ 子项padding: 0.5rem，并注入min-width: 0防溢出 - 对
flex-wrap: wrap自动添加:nth-child(3n+1) { padding-left: 0 }类选择器（按列数推算） - 保留原始单位（
rem、%、em），不强制转成px - 与 Tailwind 的
gap-4类无缝兼容，无需改 HTML 结构
用 margin 模拟 gap 时三个必加的 CSS 声明
即使不用插件，纯 CSS 降级也必须显式写全这三项，否则在旧 Safari 中会出现滚动条、截断或换行错位：
-
overflow: hidden加在 Flex 容器上——Safari 对负 margin 的 overflow 计算有 bug，不加会导致水平溢出 -
min-width: 0加在每个子项上——Flex 子项默认不收缩，padding + 内容易撑破容器宽度 -
box-sizing: border-box加在子项上——避免padding+border叠加导致尺寸失控
真正容易被忽略的点：gap 和 display: contents 的冲突
如果 Flex 子项内部用了 display: contents（比如为了语义化包裹但不产生盒模型），那它的父容器即使写了 gap，间距也会消失——因为 display: contents 让该元素“退化”为透明节点，Flex 引擎不再把它当独立 item 处理。
此时 polyfill 也无能为力，必须改用真实 DOM 节点，或把 gap 逻辑上移到其父级容器（即让 contents 的父元素成为 Flex 容器）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
