Flex容器gap失效主因是浏览器不支持，如Safari≤14.1、iOS Safari≤14.5、IE全系、Android WebView≤76；可通过DevTools灰显、Computed面板not supported或getComputedStyle(el).gap返回空字符串确认；推荐用margin-left配合:nth-child(n+2)模拟，并设flex-shrink:0和min-width:0。
Flex 容器写了 gap 却没间距？不是你写错了，是 Safari ≤14.1、iOS Safari ≤14.5、IE 全系、Android WebView ≤76 这些浏览器压根不解析它——声明被渲染引擎直接跳过，DevTools 里会显示为灰色带删除线，getComputedStyle(el).gap 返回空字符串或 "normal"。
怎么确认是 gap 不被支持，而不是 CSS 写错了
别靠猜，用三步快速定位：
- 打开 DevTools → Elements 面板选中容器 → 看 Styles 里
gap是否灰显或带删除线 - 切到 Computed 面板搜
gap，值为空或标着not supported就是兼容性问题 - 控制台运行
getComputedStyle(el).gap，返回""或"normal"同样说明未生效
排除“伪失效”：检查父容器是否漏了 display: flex，是否误写成 gab，单位是否缺失（如 gap: 12 而非 gap: 12px），子项是否用了 display: contents 破坏盒模型。
用 margin-left + :nth-child(n+2) 模拟水平 gap 最稳
核心原则是只给非首项加左外边距，避免换行后首项多出空白，也绕开 :not(:first-child) 在 iOS Safari 13.x 和 Android WebView 75 中不支持的问题。
立即学习“前端免费学习笔记（深入）”；
推荐写法：
.flex-row { display: flex; }
.flex-row .item { margin-left: var(--gap); flex-shrink: 0; }
.flex-row .item:nth-child(n+2) { margin-left: var(--gap); }
.flex-row .item:nth-child(1) { margin-left: 0; }
关键点：
- 用
:nth-child(n+2)比:not(:first-child)兼容性更好 - 必须加
flex-shrink: 0，否则内容长时子项收缩，margin-left可能“吃掉”文字或图标 - 间隙值走 CSS 自定义属性（如
--gap: 12px），方便后续响应式调整 - 子项若有
border或padding，需在margin-left值里预留空间，否则视觉间隙不准
flex-wrap 换行后首行/首列多出间隙怎么办
用 margin-left 方案时，换行后的首项仍继承该样式，导致左侧多出一倍间隙——这不是 bug，是布局流自然结果。
解决方式不是清所有首项，而是按每行数量精准清除：
- 水平布局（
flex-direction: row; flex-wrap: wrap）：假设每行 3 个，用.flex-row .item:nth-child(3n+1) { margin-left: 0; } - 垂直布局（
flex-direction: column; flex-wrap: wrap）：用:nth-child(2n+1)清首列margin-top - 务必给子项加
min-width: 0，否则默认不收缩，加上padding或内容后极易溢出容器
真正容易被忽略的是子项的 min-width: 0
Flex 子项默认 min-width: auto，加上 padding、border 或内容后，更容易撑破容器、换行异常或内容溢出。这个设置不解决 gap 兼容问题本身，但一旦漏掉，所有 margin 替代方案都会在真实场景中突然崩掉——尤其在动态插入内容或响应式缩放时。
