gap失效主因是浏览器兼容性问题，如safari 14.1以下、ie全系、android webview 76前会静默忽略；可通过devtools中gap显示灰色/删除线、computed面板值为空或getcomputedstyle返回空字符串来确认。
Flex容器写了gap却没间距？不是你写错了，是浏览器压根不解析它——Safari 14.1以下、IE全系、Android WebView 76以前，gap会被静默忽略。
怎么快速确认是不是浏览器兼容性问题
别猜，直接验证：
打开 DevTools → 选中设置了 display: flex 和 gap 的容器 → 看 Styles 面板里 gap 是否显示为灰色或带删除线；
再切到 Computed 面板，搜 gap，如果值为空或标着 not supported，基本可以确定是兼容性问题。
控制台运行 getComputedStyle(el).gap，返回空字符串 '' 或 'normal' 同样说明未生效。
常见“伪失效”场景也要排除：
- 父容器漏了
display: flex或display: inline-flex - 误写成
gab、gap:后面没值，或单位缺失（如gap: 12而非gap: 12px） - 子项用了
display: contents，破坏了 Flex 项的盒模型
用margin-left模拟水平gap最稳写法
核心原则：只给非首项加左外边距，避免换行后末尾多出空白，也绕开 :not(:first-child) 在旧版 Safari/Android WebView 中失效的问题。
推荐写法：
.flex-row { display: flex; }
.flex-row .item { margin-left: var(--gap); flex-shrink: 0; }
.flex-row .item:nth-child(1) { margin-left: 0; }
关键点：
- 用
:nth-child(n+2)比:not(:first-child)兼容性更好，尤其在 iOS Safari 13.x 和 Android WebView 75 - 必须加
flex-shrink: 0，否则内容长时子项收缩，margin-left可能“吃掉”文字或图标 - 间隙值统一走 CSS 自定义属性（如
--gap: 12px），方便后续响应式调整 - 子项若有
border或padding，需在margin-left值里预留空间，否则视觉间隙不准
flex-wrap换行后首行/首列多出间隙怎么办
用 margin-left 方案时，换行后的首项仍继承了 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或内容后极易溢出容器 - 若子项用了
display: none，它的margin仍占位——得用 JS 移除 class，或改用visibility: hidden+position: absolute
为什么min-width: 0几乎从不被主动写，却最关键
Flex 子项默认 min-width: auto，意味着它宁可撑破容器也不缩小。一旦你加了 padding、border 或长文本，又没设 min-width: 0，子项就会无视容器宽度强行扩展——这时你调 gap 或 margin 都没用，布局已经崩了。
这个值不显眼，但它是负 margin / padding / margin-left 三类兼容方案共同的隐性前提。漏掉它，其他所有写法都可能在某台老 iPhone 或微信 X5 内核安卓机上突然错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
