gap不生效主因是父容器未设display: flex或浏览器不支持；iOS Safari 14.5+、Chrome 89+、Firefox 63+才原生支持；flex中gap仅取第一个值，不支持row-gap/column-gap双值写法。
flex布局中gap不生效的常见原因
直接写gap却没看到间距？大概率是父容器没设成display: flex或用了不支持gap的老浏览器。iOS Safari 14.5+、Chrome 89+、Firefox 63+才原生支持gap在flex容器上生效——别在inline-flex或grid混用场景里默认它一定管用。
常见错误现象：gap: 12px写了但子项紧贴着；审查元素发现父容器实际是display: inline-flex；或者用了PostCSS自动补全却漏掉了flex-wrap兼容逻辑。
- 确保父容器是
display: flex（不是inline-flex，除非你明确需要内联行为） - 避免在IE或iOS gap，得回退到
margin方案 -
gap对flex-direction: column同样有效，但别和align-items: stretch冲突导致高度溢出
移动端卡片列表用gap替代margin的实操要点
用margin手动控制卡片间距，容易在换行时产生多余外边距（比如最后一行右边多出空隙），而gap天然只作用于项目之间，不碰容器边缘。
使用场景：响应式卡片流（flex-wrap: wrap）、固定列数网格（配合min-width + flex-basis）、需要动态增删卡片的列表。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
.card-list { display: flex; flex-wrap: wrap; gap: 16px; } - 横向间距用
gap，纵向用row-gap单独控制更安全（比如row-gap: 24px） - 如果卡片本身有
border-radius或box-shadow，gap能避免阴影重叠，比margin更干净
gap在flex与grid中的参数差异
gap语法一样，但行为逻辑不同：在flex里它只控制主轴和交叉轴上相邻项目的间距；在grid里它还影响轨道之间的空白，且grid支持gap缩写同时设行列，flex不支持。
性能影响几乎为零，但要注意：在大量卡片（>100项）滚动场景下，某些旧版Android WebView对gap重排计算略慢，可加will-change: transform微调。
-
flex中gap: 12px 24px等价于column-gap: 12px; row-gap: 24px -
grid中同写法会分别作用于列间隙和行间隙，但flex不识别第二个值（只取第一个） - 别把
gap和justify-content: space-between混用，后者会干扰gap的均分逻辑
兼容性兜底方案怎么写才不冗余
真要兼容iOS 13或Android 4.4，别整个复制一套margin规则覆盖所有断点，而是用@supports精准拦截。
容易踩的坑：用calc()模拟gap时忘了减去最后一项的margin，或者在flex-wrap下用:nth-child清除末尾margin太难维护。
- 推荐写法：
card-list { display: flex; flex-wrap: wrap; gap: 16px; } @supports not (gap: 16px) { .card-list > * { margin-right: 16px; margin-bottom: 16px; } .card-list > *:nth-child(3n) { margin-right: 0; } } - 如果列数不固定（比如响应式从3列变2列），就别用
:nth-child，改用JavaScript动态加类或直接上grid降级 - 注意
gap单位可以是rem、%甚至em，但%在flex中表现不稳定，建议统一用px或rem
gap看着简单，但真正卡住人的永远是那个“刚好在某个安卓WebView里失效”的边缘 case，而不是语法本身。
