低版本 safari（≤14.1）对 gap 是“伪支持”，@supports (gap: 0) 返回 true 但实际在 flex-wrap 中静默忽略，导致错位；实锤方法：devtools styles 中 gap 灰显或带删除线、computed 面板值为空或 not supported、getcomputedstyle(el).gap 返回 '' 或 'normal'。
低版本 Safari（≤14.1）对 gap 的支持是“伪支持”——@supports (gap: 0) 返回 true，但实际在 flex-wrap 或多行布局中会静默忽略，导致子项错位、间隙消失。不能靠检测就放心用，必须降级。
怎么实锤 gap 没生效，而不是写错了？
别信文档或 UA 字符串，三步直接验证：
- DevTools → Elements 面板选中 flex/grid 容器，
gap在 Styles 里显示为灰色或带删除线 - Computed 面板搜索
gap，值为空字符串''或标着not supported - 控制台执行
getComputedStyle(el).gap，返回''或'normal'
特别注意：Safari 14.1 是典型陷阱，上述任一检查都可能“看起来正常”，但换行后首行子项左侧/顶部会多出一倍空白——那是负 margin + padding 方案未清除首项冗余边距的表现，不是原生 gap 生效了。
用 margin-left + :nth-child(n+2) 模拟水平 gap 最稳
这是零 JS、无 polyfill、兼容 iOS Safari 13.x 和 Android WebView 75 的首选方案，但必须满足以下条件：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 只给非首项加
margin-left: var(--gap)，避免换行后末尾多出空白 - 必须用
:nth-child(n+2)，:not(:first-child)在旧 Safari/WebView 中不生效 - 每个子项设
flex-shrink: 0，否则长文本或图片会被压缩，“吃掉”外边距 - 每个子项显式声明
min-width: 0，否则默认min-width: auto会让内容撑破容器 - 若子项有
border或padding，margin-left值需额外预留空间，否则视觉间隙不准
示例：
:root { --gap: 12px; }
.flex-row { display: flex; }
.flex-row > * {
margin-left: var(--gap);
flex-shrink: 0;
min-width: 0;
}
.flex-row > *:nth-child(1) { margin-left: 0; }
用负 margin + padding 模拟时，四个条件缺一不可
该方案视觉更一致，但落地门槛高，四点必须同时满足：
- 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（对应目标gap: 16px）
换行场景下，:nth-child(3n+1) 必须清除首列 padding-left，否则每行开头都会多出一倍间隙——这不是 bug，是布局流自然结果，得手动修正。
真正容易被忽略的永远是 min-width: 0 和 box-sizing: border-box：它们几乎从不在 demo 里出现，但线上布局崩坏，十次有八次源于这两条缺失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
