safari ≤14.1根本不解析gap属性，需用:nth-child(n+2)配合margin-left模拟，并严格满足overflow:hidden、min-width:0、box-sizing:border-box和均分负边距四条件。
Flexbox 的 gap 属性在 Safari ≤14.1 中根本不会被解析——不是“失效”，是浏览器压根不认识这个 CSS 声明。DevTools 里它显示灰色带删除线，getComputedStyle(el).gap 返回空字符串 ''，就说明问题不在你写的代码，而在浏览器引擎。
怎么确认是 gap 不支持，而不是写错了
别靠猜，三步实锤：
- DevTools → Elements 面板选中 flex 容器，看
gap是否灰显或带删除线 - Computed 面板搜索
gap，值为''或标着not supported - 控制台执行
getComputedStyle(el).gap，返回''或'normal'
特别注意：Safari 14.1 是“伪支持”陷阱——@supports (gap: 0) 会返回 true，但实际在 flex 容器中仍跳过声明，换行时子项错位甚至塌陷。
用 :nth-child(n+2) + margin-left 模拟水平 gap
这是兼容性最稳、零 JS、不依赖构建工具的方案，比 :not(:first-child) 更可靠（后者在 iOS Safari 13.x 和 Android WebView 75 不生效）：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
.flex-row { display: flex; }<br>.flex-row > * { margin-left: var(--gap); flex-shrink: 0; }<br>.flex-row > *:nth-child(1) { margin-left: 0; }
- 必须设
flex-shrink: 0，否则长文本或图标会被压缩，margin-left可能“吃掉”内容 - 间隙值走 CSS 自定义属性（如
--gap: 12px），方便后续响应式调整 - 子项若有
border或padding，需在margin-left值里预留空间，否则视觉间隙不准
启用 flex-wrap 后，首行/首列多出一倍间隙怎么办
纯 margin-left 方案在换行后无法区分“行内间隔”和“行间间隔”，导致每行首项左侧多出冗余间隙。这时不能只清 :nth-child(1)，而要按每行数量精准清除：
- 水平布局（
flex-direction: row; flex-wrap: wrap）：假设每行 3 个，用.flex-row > *:nth-child(3n+1) { margin-left: 0; } - 垂直布局（
flex-direction: column; flex-wrap: wrap）：用:nth-child(2n+1)清首列 - 务必给子项加
min-width: 0，否则默认min-width: auto会让 padding + 内容撑破容器 - 同时加
box-sizing: border-box，避免padding+border导致尺寸失控
真正容易被忽略的四个硬性条件
如果用了负 margin + padding 方案（容器 margin: -8px，子项 padding: 8px），这四点缺一不可，否则旧 Safari 里大概率出现滚动条或布局塌陷：
- flex 容器加
overflow: hidden（否则负 margin 触发意外水平滚动） - 每个子项加
min-width: 0（防内容撑宽溢出） - 每个子项加
box-sizing: border-box（防padding/border失控） - 间隙值必须均分（容器
margin-left: -8px; margin-right: -8px，子项padding-left: 8px; padding-right: 8px）
这些不是“可选优化”，而是旧版 Safari 解析 Flex 子项盒模型时的底层行为要求——漏掉任意一条，都可能让布局在 iOS 13.3 或 macOS 10.15 上突然错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
