gap在safari≤14.1、ie全系、android webview≤76中被静默忽略；可通过devtools中gap灰显/删除线、computed面板值为空或getcomputedstyle返回空字符串确认；推荐用margin-left+ :nth-child(n+2)降级，并注意flex-shrink: 0、min-width: 0等细节。
gap 属性在 Safari 14.1 以下、IE 全系、Android WebView 76 以前等旧浏览器中会被静默忽略——不是报错，而是压根不解析。直接写 gap: 12px 等于没写。
怎么快速确认是 gap 不兼容，而不是你写错了
别靠猜。打开 DevTools → 选中设置了 display: flex 和 gap 的容器 → 看 Styles 面板里 gap 是否显示为灰色或带删除线；再切到 Computed 面板搜 gap，如果值为空或标着 not supported，就是兼容性问题。控制台运行 getComputedStyle(el).gap 返回空字符串 '' 或 'normal' 同样说明未生效。
用 margin-left + :nth-child(n+2) 是最稳的降级写法
核心原则：只给非首项加左外边距，避免换行后末尾多出空白，也绕开 :not(:first-child) 在 iOS Safari 13.x 和 Android WebView 75 中失效的问题。
- 必须用
:nth-child(n+2)（而非:not(:first-child)），兼容性更可靠 - 子项必须加
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
@supports 不能用于 IE11 的 gap 降级
@supports (gap: 1px) 在 IE11 中整条规则块被静默丢弃，它根本不识别 @supports 语法。常见错误写法是把现代样式包在 @supports 里，降级样式放在后面——IE11 连 fallback 都进不去。
正确路径是「裸写降级，增强包裹」：
先写兼容性最强的方案（如 display: flex + margin 逻辑），再另起一段 @supports (gap: 1px) 覆盖它。真正容易被忽略的是：gap 的行为只取决于容器是否换行、是否有明确交叉轴尺寸，而 margin 降级必须手动模拟这些边界条件，稍有偏差就会在断点切换或动态插入时露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
