Safari ≤14.1（macOS）和 ≤14.5（iOS）完全不支持Flex容器的gap属性，解析器直接跳过；可通过Styles面板灰色显示、Computed值为空或getComputedStyle返回''/normal三步实锤，且@supports(gap:0)存在伪支持陷阱。
因为 Safari ≤14.1（macOS）和 ≤14.5（iOS）压根没实现 Flex 容器上的 gap 属性——不是“兼容性差”，是解析器直接跳过该声明，连报错都不会有。
怎么确认是不是 gap 被浏览器静默忽略
别靠猜，三步实锤：
- DevTools → Elements 面板选中 flex 容器，
gap在 Styles 里显示灰色或带删除线 - Computed 面板搜索
gap，值为空字符串''或标着not supported - 控制台执行
getComputedStyle(el).gap，返回''或'normal'
特别注意：@supports (gap: 0) 在 Safari 14.1 会返回 true，但实际仍不生效——这是个“伪支持”陷阱，必须用双条件检测：@supports (grid-row-gap: 0) and (row-gap: 0)。
为什么 -webkit-gap 也无效
-webkit-gap 等前缀写法在旧 Safari 中完全不被识别。Flex 的 gap 属于 CSS Box Alignment Module Level 1 规范，而 Safari 直到 14.1 才开始在 Grid 中部分支持 gap，对 Flex 容器则始终未实现。加前缀不能弥补语法层缺失，强行写只会被丢弃。
立即学习“前端免费学习笔记（深入）”；
flex-wrap 场景下 margin 方案为啥还出错
用 margin-left 模拟水平间隙时，flex-wrap: wrap 会导致换行后首项左侧多出一倍视觉间隙——这不是 bug，是布局流自然结果。常见错误包括：
- 用
:not(:first-child)清首项：iOS Safari 13.x 和 Android WebView 75 不支持，必须改用:nth-child(n+2) - 漏掉
flex-shrink: 0：子项内容长时收缩，margin-left会“吃掉”文字或图标 - 没设
min-width: 0：子项默认min-width: auto，加padding后极易撑破容器引发横向滚动 - 没加
box-sizing: border-box：padding+border导致尺寸失控，间隙不准
真正容易被忽略的是 min-width: 0 和 box-sizing: border-box ——它们不解决“有没有间隙”，而是防止间隙出现后布局直接塌陷或溢出。
