Gap失效主因是浏览器兼容性问题，如Safari 14.1以下、IE全系、Android WebView 76前会静默忽略；可通过DevTools中gap显示灰色/删除线、Computed面板值为空或getComputedStyle返回空字符串来确认。
Flex容器写了却没间距？不是你写错了，是浏览器压根不解析它——Safari 14.1以下、IE全系、Android WebView 76以前，会被静默忽略。
怎么快速确认是不是浏览器兼容性问题
别猜，直接验证：
打开 DevTools → 选中设置了
和
的容器 → 看 Styles 面板里
是否显示为灰色或带删除线；
再切到 Computed 面板，搜
，如果值为空或标着
，基本可以确定是兼容性问题。
控制台运行
，返回空字符串
或
同样说明未生效。
常见“伪失效”场景也要排除：
父容器漏了
或
误写成
、
后面没值，或单位缺失（如
而非
）
子项用了
，破坏了 Flex 项的盒模型
用
模拟水平
最稳写法
核心原则：只给非首项加左外边距，避免换行后末尾多出空白，也绕开
在旧版 Safari/Android WebView 中失效的问题。
立即学习
“
前端免费学习笔记（深入）
”；
推荐写法：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
关键点：
用
比
兼容性更好，尤其在 iOS Safari 13.x 和 Android WebView 75
必须加
，否则内容长时子项收缩，
可能“吃掉”文字或图标
间隙值统一走 CSS 自定义属性（如
），方便后续响应式调整
子项若有
或
，需在
值里预留空间，否则视觉间隙不准
换行后首行/首列多出间隙怎么办
用
方案时，换行后的首项仍继承了
，导致左侧多出一倍间隙——这不是 bug，是布局流自然结果。
解决方式不是清所有首项，而是按每行数量精准清除：
水平布局（
）：假设每行 3 个，用
垂直布局（
）：用
清首列
务必给子项加
，否则默认不收缩，加上
或内容后极易溢出容器
若子项用了
，它的
仍占位——得用 JS 移除 class，或改用
+
为什么
几乎从不被主动写，却最关键
Flex 子项默认
，意味着它宁可撑破容器也不缩小。一旦你加了
、
或长文本，又没设
，子项就会无视容器宽度强行扩展——这时你调
或
都没用，布局已经崩了。
这个值不显眼，但它是负 margin / padding / margin-left 三类兼容方案共同的隐性前提。漏掉它，其他所有写法都可能在某台老 iPhone 或微信 X5 内核安卓机上突然错位。
gapgapdisplay: flexgapgapgapnot supportedgetComputedStyle(el).gap'''normal'display: flexdisplay: inline-flexgabgap:gap: 12gap: 12pxdisplay: contentsmargin-leftgap:not(:first-child).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)flex-shrink: 0margin-left--gap: 12pxborderpaddingmargin-leftflex-wrapmargin-leftmargin-leftflex-direction: row; flex-wrap: wrap.flex-row .item:nth-child(3n+1) { margin-left: 0; }flex-direction: column; flex-wrap: wrap:nth-child(2n+1)margin-topmin-width: 0paddingdisplay: nonemarginvisibility: hiddenposition: absolutemin-width: 0min-width: autopaddingbordermin-width: 0gapmargin