gap在移动端flex-wrap中不生效，根本原因是父容器漏写display: flex；必须同时声明display: flex和flex-wrap: wrap，且优先拆分row-gap/column-gap，清除子项margin并用padding替代首尾留白。
因为 Android 4.4 以下 WebView 完全不识别 flex-wrap，而 4.4–6.0 厂商定制内核对 flex-basis、flex-shrink 的解析极不稳定——不是写错了，是浏览器压根没执行。
Android 4.4 以下：flex-wrap 直接被忽略
老内核（比如 Android 4.1–4.3 的 WebView）根本没有 Flex 概念，display: flex 和 flex-wrap: wrap 整条声明都会被跳过，连带子项的 flex、align-self 全部失效。此时加 -webkit-flex 前缀也没用，必须降级到 display: -webkit-box 模型。
关键点：
-
display: -webkit-box必须显式写在父容器上，否则所有子项的-webkit-box-flex都无效 -
-webkit-box-flex: 1不等于flex: 1，它只表示“按权重分剩余空间”，不控制是否换行 -
-webkit-box-orient: vertical才对应flex-direction: column，写成horizontal是常见反向错误 - 真机测试不可替代：Chrome DevTools 的 Android 模拟器无法复现 4.4–6.0 原生 WebView 的渲染逻辑
Android 4.4–6.0：flex-wrap 被触发但换行错乱
这个区间（尤其厂商定制 WebView，如华为 EMUI 4.x、小米 MIUI 7）能识别 flex-wrap: wrap，但对换行条件判断非常苛刻。常见现象是：PC 和 iOS 正常换行，安卓真机却卡死一行、横向滚动或右侧溢出。
根本原因不是样式没生效，而是换行条件未满足：
- 父容器缺
width: 100%（仅靠max-width在部分内核下不触发换行逻辑） - 子项含
white-space: nowrap（第三方 UI 库重置样式常偷偷加上） - 某个子项设了固定
width且未配flex-shrink: 1，导致浏览器判定“空间够，不换” -
flex-flow: wrap row顺序错误，整条声明被忽略（正确是flex-flow: row wrap）
gap 在安卓 WebView 中不生效？先查 display 和 flex-wrap 是否共存
row-gap 和 column-gap 在 Android Chrome 84+、WebView 75+ 才稳定支持，但前提是 display: flex 和 flex-wrap: wrap 必须同时存在。很多“gap 不起作用”的案例，实际是父容器只写了 flex-wrap: wrap，漏了 display: flex，浏览器直接跳过 gap 解析。
实操建议：
- 在 DevTools 的 Computed 面板确认
display值确实是flex，不是inline-flex或block - 避免用
gap: 12px简写，某些旧版 X5 内核对双值解析失败，优先拆成row-gap: 12px和column-gap: 8px - 换行后首尾多空白？清掉所有子项的
margin，改用父容器padding控制内外留白 - 需兼容 iOS Safari ≤13.1 或微信 X5 内核时，用伪元素模拟：
.container { margin: -6px; } .item { padding: 6px; }
flex-basis: auto 导致文字撑宽、换行失效
移动端窄屏下，标题或描述文字常因 flex-basis: auto（默认）取最长单词宽度，使该子项过宽，挤压其他项，间接破坏换行。更麻烦的是，Android 4.4–6.0 对 flex-basis: auto 解析不稳定，window.getComputedStyle(el).flexBasis 可能返回 auto，说明它根本没进渲染树。
可靠解法：
- 子项加
min-width: 0（必须加在文字所在的具体元素上，不是父容器） - 长文本容器补
overflow-wrap: break-word或word-break: break-word - 图片统一加
max-width: 100%和height: auto，防固有尺寸卡死布局 - 慎用
rpx写flex-basis或min-width：不同屏幕算出的像素值差异大，易导致收缩行为跨设备不一致
最常被忽略的一点：换行不是“屏幕一窄就自动发生”，而是 flex-wrap: wrap + 可收缩的子项 + 显式宽度约束三者共同作用的结果。少一个，安卓真机上就大概率错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
