旧版 safari（≤14.1）完全不解析 gap 属性，需用负 margin + 正 margin 模拟并设 overflow: hidden 和 min-width: 0；@supports 检测须用 (grid-row-gap: 0) and (row-gap: 0) 避开伪支持陷阱。
旧版 Safari（≤14.1）根本不会解析 gap，不是“表现异常”，是直接跳过
你在 CSS 里写了 gap: 16px，Safari 14.1 及更早版本（包括 iOS 14.5 及更早）的渲染引擎压根不识别这个声明——DevTools 里会显示为灰色带删除线，getComputedStyle(el).gap 返回空字符串或 "normal"。这不是加个 -webkit- 前缀就能解决的问题，Autoprefixer 对它完全无能为力。
常见错误现象：flex 容器内子项紧贴排列、换行错位、甚至整个布局塌陷。别急着改 justify-content 或加 margin 调试，先确认是不是浏览器根本不吃这口。
用负 margin + 正 margin 模拟 gap 时，必须设 overflow: hidden
最常用的手动降级写法是：给容器加负边距，子项加正边距，靠抵消实现视觉间距。但 Safari 旧版对 overflow 计算有 bug，即使容器宽度为 100%，负边距仍可能触发意外水平滚动条，或截断右侧子项。
-
.flex-container设margin-left: -8px; margin-right: -8px; overflow: hidden -
.flex-container > *设margin-left: 8px; margin-right: 8px - 若只用
padding替代（比如父容器负margin+ 子项正padding），要额外加min-width: 0防溢出 - 别用
:not(:first-child)清首项 margin —— 低版本 Safari 和 Android WebView 不支持，改用:nth-child(n+2)
@supports 检测不能只写 (gap: 0)，Safari 14.1 是“伪支持”陷阱
Safari 14.1 支持 grid-row-gap，但不支持 row-gap 在 flex 中的行为，直接写 @supports (gap: 0) 会被误判为“支持”，导致降级失效，布局在换行时错位。
稳妥写法是双条件检测：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
@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; }
}
注意：如果项目明确不支持 Safari 14.1 以下，就别加这套检测——维护成本高，且无法覆盖它存在的渲染 bug。
真正容易被忽略的是子项的 min-width: 0
Flex 子项默认 min-width: auto，加上 padding 或 margin 后，更容易撑破容器、换行异常或内容溢出。尤其当子项含图片、文本或弹性内容时，不加 min-width: 0 就算负 margin + 正 margin 写对了，也可能在 Safari 旧版里突然崩掉。
务必在子项上统一加：
.flex-container > * {
min-width: 0;
box-sizing: border-box;
}
这个声明看起来不起眼，却是旧版 Safari 下 flex gap 降级方案能否稳定落地的关键一环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
