旧浏览器（ie全系、safari ≤14.1等）完全不解析gap属性，必须用margin模拟并严格添加overflow:hidden、min-width:0、box-sizing:border-box及半分间隙值，缺一即导致错位或滚动条。
直接上结论：旧浏览器（IE全系、Safari ≤14.1、iOS Safari ≤14.5、Android WebView ≤76）压根不解析 gap、row-gap、column-gap，写了等于没写——必须用 margin 模拟，且漏掉任意一个防护声明，布局就可能在真实设备上突然错位或触发横向滚动。
怎么快速确认是浏览器不支持，而不是你写错了
别靠“看起来没效果”下结论，三步实锤：
- DevTools → Elements 面板选中 Flex 容器，看
gap是否灰显或带删除线 - Computed 面板搜索
gap，值为空字符串""或标着not supported - 控制台执行
getComputedStyle(el).gap，返回""或"normal"就坐实了
注意：@supports (gap: 0) 在 Safari 14.1 是伪支持陷阱——它返回 true，但只对 Grid 生效，Flex 中的 gap 仍静默忽略。必须改用双条件检测：@supports (grid-row-gap: 0) and (row-gap: 0)。
手写 margin 降级方案必须加的四个声明
哪怕只模拟水平间距，以下四点缺一不可，否则 iOS Safari 14.5 或 Android WebView 75 下极易出滚动条、换行偏移或内容截断：
-
overflow: hidden加在 Flex 容器上——Safari 对负 margin 的 overflow 计算有 bug，不加会意外触发水平滚动 -
min-width: 0加在每个子项上——防止长文本或图片撑宽后破坏flex-shrink行为，这是最常被漏掉的一条 -
box-sizing: border-box加在子项上——避免padding+border导致尺寸失控 - 间隙值按半分：目标
gap: 16px→ 容器设margin-left: -8px; margin-right: -8px，子项设margin-left: 8px; margin-right: 8px
别用 :not(:first-child) 清首项 margin——旧版 Safari 和 Android WebView 不支持，改用 :nth-child(n+2)。
PostCSS 插件方案要注意的构建时陷阱
如果你已接入 PostCSS，postcss-gap-properties 或 flex-gap-polyfill 是最省心的选择，但它不是“写完就跑”：
- 它不生成
-ms-前缀，需额外配autoprefixer补全display: -ms-flexbox等基础语法 - 它在编译期把
gap: 12px拆成容器负 margin + 子项正 margin，能处理嵌套和flex-wrap，但对动态增删子项的场景仍可能漏算 - 上线前务必在真实 IE11 或 iOS Safari 14.5 设备上验证 DOM 变化后的间隙表现，SSR hydrate 前后子项数量不一致时容易短暂错位
真正容易被忽略的是：IE11 对 flex-basis 的计算逻辑和现代浏览器不同，哪怕 margin 方案写对了，只要子项用了 flex: 1 或 flex-basis: content，间隙就可能错位或消失——这时候得手动固定 flex-basis，比如 flex: 0 0 calc(33.333% - 8px)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
