Safari ≤14.1（macOS）和 ≤14.5（iOS）完全不解析Flex容器的gap属性，解析器直接跳过声明；可通过Styles面板灰色显示、Computed值为空或getComputedStyle返回''/normal三步实锤，且@supports(gap:0)存在伪支持陷阱。
原生 gap 在 Safari ≤14.1（macOS）和 ≤14.5（iOS）中根本不会被解析——不是“不生效”，是 CSS 解析器直接跳过整条声明，连报错或警告都没有。别信 @supports (gap: 0)，它在 Safari 14.1 会返回 true，但布局照样错位。
怎么快速确认 gap 被静默忽略
别靠猜，三步实锤：
- DevTools → Elements 面板选中 flex 容器，
gap在 Styles 里显示灰色或带删除线 - Computed 面板搜索
gap，值为空字符串''或标着not supported - 控制台执行
getComputedStyle(el).gap，返回''或'normal'
为什么 -webkit-gap 和 @supports 都不可靠
-webkit-gap 等前缀写法在旧 Safari 中完全不识别——Flex 的 gap 属于 Box Alignment Level 1 规范，Safari 直到 14.1 才在 Grid 中部分支持，对 Flex 容器始终未实现。加前缀不能弥补语法层缺失。
@supports (gap: 0) 是个伪支持陷阱：Safari 14.1 返回 true，但实际仍跳过；真正能兜底的是双条件检测：@supports (grid-row-gap: 0) and (row-gap: 0)。不过多数项目更务实：明确支持 Safari 14.1+ 才用原生 gap，否则全局走降级方案。
手动模拟 gap 的硬性条件（缺一不可）
用负 margin + padding 模拟 gap: 16px 时，必须同时满足四点，否则在旧 Safari 里大概率出横向滚动条或子项溢出：
- flex 容器加
overflow: hidden（防负 margin 触发意外滚动） - 每个子项加
min-width: 0（默认min-width: auto，加padding后极易撑破容器） - 每个子项加
box-sizing: border-box（避免padding+border导致尺寸失控） - 间隙均分：容器设
margin-left: -8px; margin-right: -8px，子项设padding-left: 8px; padding-right: 8px
flex-wrap 场景下清除首项冗余 padding 的正确写法
水平 flex-wrap: wrap 时，换行后首项左侧会多出一倍视觉间隙——这不是 bug，是布局流自然结果。常见错误包括：
- 用
:not(:first-child)清首项：iOS Safari 13.x和Android WebView 75不支持，必须改用:nth-child(n+2) - 漏掉
flex-shrink: 0：子项内容长时收缩，padding-left会“吃掉”文字或图标 - 没设
min-width: 0：子项默认min-width: auto，加padding后极易撑破容器引发横向滚动 - 没加
box-sizing: border-box：padding+border导致尺寸失控，间隙不准
真正容易被忽略的是 min-width: 0 和 box-sizing: border-box——它们不解决“有没有间隙”，而是防止间隙出现后布局直接塌陷或溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
