gap在移动端不生效主因是浏览器兼容性问题，safari≤14.5、ios safari≤14.5、android webview≤76及ie全系会静默忽略gap；可通过devtools检查styles或computed验证；推荐使用flex-gap-polyfill等postcss插件自动转换为负margin方案。
gap在移动端不生效？先确认是不是Safari 14.5以下或Android WebView旧版本
直接写gap: 12px却没间距，大概率不是代码写错，而是浏览器压根不解析——Safari ≤14.5、iOS Safari ≤14.5、Android WebView ≤76、IE全系都会静默忽略gap。打开DevTools，选中容器，在Styles面板看gap是否显示灰色或带删除线；Computed里搜不到值，或getComputedStyle(el).gap返回空字符串，就是兼容性问题。
用PostCSS插件自动注入负margin方案最省心
手写margin + :nth-child容易漏边、难维护，尤其动态增删卡片时会错位。推荐用flex-gap-polyfill这类PostCSS插件，构建时自动把gap: 16px转成：
.card-list {
display: flex;
--fgp-gap: 16px;
margin-left: calc(-16px + var(--orig-margin-left, 0px));
margin-top: calc(-16px + var(--orig-margin-top, 0px));
}
.card-list > * {
margin-left: calc(16px + var(--orig-margin-left, 0px));
margin-top: calc(16px + var(--orig-margin-top, 0px));
}
- 无需改HTML，不依赖JS，零运行时开销
- 支持
row-gap/column-gap单独设置 - 能处理嵌套flex容器，避免margin叠加
- 保留原有
margin、padding、border样式逻辑
手动实现负margin+padding时必须绕过的三个坑
如果不用构建工具，得自己写兼容代码，注意这三处高频翻车点：
-
flex-wrap: wrap下，换行后首项会多出顶部/左侧padding——要用:nth-child(3n+1)（假设每行3个）清掉padding-left - 子项有
border时，padding+border可能撑大尺寸，务必加box-sizing: border-box - 子项设了
display: none，它的padding仍占位——得用visibility: hidden+position: absolute规避，或用JS同步移除class
别信@supports (gap: 0)，它挡不住Safari 14.1的渲染bug
@supports只能判断语法是否被识别，但Safari 14.1这种“识别gap却在flex-wrap下错位”的中间态版本，@supports会返回true，实际布局已崩。更稳妥的做法是：项目明确要求支持Safari 14.1+才启用原生gap；否则全局走PostCSS polyfill，或统一用负margin方案。真正容易被忽略的是子项没设min-width: 0——flex子项默认不收缩，加上padding后极易溢出容器，导致换行异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
