gap在移动端flex-wrap中不生效，根本原因是父容器漏写display: flex；必须同时声明display: flex和flex-wrap: wrap，且优先拆分row-gap/column-gap，清除子项margin并用padding替代首尾留白。
gap在移动端flex-wrap中不生效？先确认display和flex-wrap是否同时存在
移动端常见现象是写了row-gap: 12px却完全没反应，根本原因往往是父容器只写了flex-wrap: wrap，漏了display: flex——浏览器直接忽略gap系列属性。iOS Safari 14.1+、Android Chrome 84+ 都支持row-gap，但必须两个声明共存。
- 检查 DevTools 的 Computed 面板，确认
display值确实是flex，而非inline-flex或block - 避免用
gap: 12px简写：移动端某些旧版 WebView（如微信 X5 内核）对双值gap解析不稳定，优先拆成row-gap: 12px和column-gap: 8px - 别在
flex-direction: column下指望row-gap控制“行距”——此时它控制的是列与列之间的垂直间距，而column方向本身不换行
换行后首尾项多出空白？清除子项margin，别和gap混用
用margin-right和margin-bottom模拟间隙，在移动端换行时极易失控：最后一行末尾元素仍带margin-right，下一行首个元素又带margin-left，视觉上左右不对称；更糟的是margin-bottom叠加row-gap，导致实际间距翻倍。
- 统一清掉所有子项的
margin-top、margin-bottom、margin-right、margin-left - 首尾留白改用父容器的
padding-top/padding-bottom，和gap解耦 - 若必须兼容 iOS Safari ≤13.1（部分老版微信），降级方案用伪元素：
.container { margin: -6px; }+.item { padding: 6px; }模拟gap: 12px，但需配合精确的flex-basis计算
子项高度不一致导致行间错位？关掉align-content，用row-gap+align-items:flex-start
移动端常见场景：一行里有个图片没设height，另一行是纯文本，align-content: stretch（默认）会把每行都拉高到容器高度，造成“行距爆炸”的错觉；而align-content: space-between在容器高度由内容撑开时完全无效。
- 先把
align-content设为flex-start，关闭行块拉伸 - 再配
align-items: flex-start或center，让子项按自身高度自然对齐 - 此时
row-gap: 12px才能真实反映行间像素级空白——它不拉伸、不重排，只插入固定空白 - 如果子项高度差异大（比如图文混排），优先统一
min-height或用aspect-ratio约束图片，比硬调align-content更可靠
文字换行挤到一起或溢出？控制flex-basis和overflow-wrap
移动端窄屏下，标题或描述文字常因flex-basis: auto（默认）取最长单词宽度，导致该子项过宽，挤压其他项，间接破坏换行位置；加上未设min-width: 0，overflow-wrap: break-word也失效。
- 文字容器设
flex: 1 1 0（即flex-grow: 1,flex-shrink: 1,flex-basis: 0） - 必须加
min-width: 0，否则 Flex item 默认min-width: auto会阻止收缩 -
overflow-wrap: break-word搭配word-break: keep-all（中文不断字，英文按单词断） - 避免
white-space: nowrap——这是移动端文字换行异常最常被忽略的干扰项
row-gap，而是检查父容器有没有padding-top，以及第一个子项有没有意外的margin-top。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
