flex的gap在移动端不生效，八成是浏览器不支持：ios safari 14.4及更早、android webview ≤76、微信x5内核等环境直接忽略gap；需用devtools灰显、computed面板not supported或getcomputedstyle(el).gap返回空字符串确认；兼容方案为margin-left配合:nth-child(n+2)，并设flex-shrink:0、min-width:0和box-sizing:border-box。
Flex的gap在移动端不生效，八成不是你写错了，而是浏览器压根不认这个属性——iOS Safari 14.4及更早、Android WebView ≤76、微信X5内核等环境会直接忽略gap声明，DevTools里显示为灰色或not supported。
怎么快速确认是浏览器不支持，而不是CSS写错了
别猜，三步定位：
- 打开DevTools → Elements面板选中父容器 → 看Styles里
gap是否灰显或带删除线 - 切到Computed面板搜
gap，值为空、normal或标着not supported就是兼容性问题 - 控制台运行
getComputedStyle(el).gap，返回空字符串""即实锤
排除伪失效：检查是否漏了display: flex、拼错成gab、单位缺失（如gap: 12而非gap: 12px）、子项用了display: contents破坏盒模型。
用margin-left + :nth-child(n+2)模拟水平间隙最稳
只给非首项加左外边距，能避开换行后首项多出空白的问题，也比:not(:first-child)在iOS Safari 13.x和Android WebView 75中兼容性更好：
.flex-row { display: flex; }
.flex-row .item { margin-left: var(--gap); flex-shrink: 0; }
.flex-row .item:nth-child(n+2) { margin-left: var(--gap); }
.flex-row .item:nth-child(1) { margin-left: 0; }
关键点：
- 必须加
flex-shrink: 0，否则长文本或图片会让子项收缩，margin-left被“吃掉” - 间隙值走CSS自定义属性（如
--gap: 12px），方便后续响应式调整 - 子项若有
border或padding，需在margin-left里预留空间，否则视觉不准
flex-wrap: wrap换行后首行/首列多出间隙怎么清
用margin-left方案时，换行后的首项仍继承该样式，导致左侧多出一倍间隙——这不是bug，是布局流自然结果。不能笼统清:first-child，得按每行数量精准清除：
- 水平布局（
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)清首列padding-top或margin-top - 务必加
min-width: 0，否则子项内容过长会撑破容器；box-sizing: border-box也得显式声明，避免padding+border尺寸失控
真正容易被忽略的三个点
一是min-width: 0几乎从不被主动写，但它能防止子项因内容过长撑破容器；二是box-sizing: border-box必须显式声明，否则padding+border会让尺寸失控；三是当卡片高度不一致时，row-gap照常生效，但align-content会因每行基线不同显得错位——这时别硬调align-content，先统一子项高度或改用grid。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
