旧版 android webview（4.4 以下）不支持 flex-wrap，因 webkit 534 内核未实现该属性；须降级为 display: -webkit-box 并严格声明顺序，且子项需设显式宽度，多行需 js 或媒体查询降级。
旧版 Android WebView（4.4 以下）根本不支持 flex-wrap，所谓“错乱”不是样式没生效，而是浏览器压根没执行——它连解析都不会触发。
为什么 flex-wrap: wrap 在 Android 4.3 及更早版本上静默失效
Android 4.3 及更早的 WebView 基于 WebKit 534 内核，该内核从未实现 flex-wrap 的任何变体（包括 -webkit-flex-wrap）。你写上去，getComputedStyle(el).display 返回的仍是 block，整个 Flex 上下文都未建立。
常见错误现象：
-
flex-wrap: wrap写了但子项死撑一行、横向溢出 - 加了
-webkit-flex-wrap: wrap依然无效 - DevTools 显示父容器
display是block或inline，而非flex
这不是漏前缀或拼写错误，是能力缺失。Autoprefixer 也无法生成有效降级代码，因为它不转换语义模型。
必须降级到 display: -webkit-box，且顺序不能错
要让布局在旧安卓上跑起来，得彻底放弃 flex-wrap 思路，改用老式弹性盒，并严格按顺序声明：
.nav-container {
display: -webkit-box;
display: flex;
}
漏掉第一行，旧安卓白屏；顺序颠倒（display: flex 在前），整条规则被跳过。
关键约束条件：
-
-webkit-box是单行模型，-webkit-box-lines: multiple不存在，别写 - 子项必须设显式宽度锚点，否则全部塌缩成内容宽：
width: 120px或min-width: 120px - 删掉所有
width和max-width：它们会压制-webkit-box-flex计算 - HTML 中必须有
<meta name="viewport" content="width=device-width">，否则老 WebView 按桌面视口渲染
多行排版只能靠 JS 或结构降级，不能依赖 CSS
当真需要换行（比如导航菜单在小屏分两行），flex-wrap 和 -webkit-box 都无解。可行路径只有三条：
- 用媒体查询 +
display: block切换为传统流式布局（最稳定） - 用 JS 检测容器宽度，动态插入
<br>或拆分 DOM 节点 - 放弃自动换行，固定每行数量（如三列），配合
overflow-x: auto滚动
示例降级逻辑：
@media (max-width: 480px) {
.nav-container { display: block; }
.nav-item { display: block; text-align: center; margin: 8px 0; }
}
注意：不要混用新旧语法——父容器写 display: -webkit-box，子项却用 flex: 1 或 justify-content，老内核直接跳过该子项。
Android 4.4–6.0 厂商定制 WebView 的“伪换行”陷阱
这个区间（如华为 EMUI 4.x、小米 MIUI 7）能识别 flex-wrap: wrap，但换行逻辑极脆弱，常表现为：
- PC 和 iOS 正常，安卓真机卡死一行或右侧溢出
- 换行后首尾留白异常、图标高度突变
-
flex-basis: auto被忽略或误判为0
必须满足的硬性条件：
- 父容器显式写
width: 100%（仅max-width不够） - 子项禁用
white-space: nowrap（第三方 UI 库常偷偷加） - 每个子项加
flex-shrink: 1和min-width: 0 - 避免
flex: 1简写，改用flex: 1 1 0显式设flex-basis
真机测试不可替代：Chrome DevTools 的 Android 模拟器无法复现这些厂商内核的渲染行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
