Flex布局在低端安卓WebView中“失效”的根因是内核不识别flex语法，必须降级为display:-webkit-box；需检查viewport、避免新旧写法混用、为子项设宽度锚点，并手动转换属性而非依赖autoprefixer。
直接看 computed 样式里的 display 值——如果显示为 block 或 inline，说明 Flex 上下文根本没建立，不是样式没生效，而是浏览器压根不认 display: flex 这个声明。
确认 WebView 内核版本是否支持 Flex
低端安卓机（尤其是 Android 4.3 及更早）的 WebView 基于 WebKit 534，连 display: -webkit-flex 都不识别。它唯一能理解的是 display: -webkit-box。别被“加前缀就能兼容”的说法误导——这不是补前缀的问题，是整套模型必须降级。
- 用
adb shell dumpsys package com.android.webview或访问 BeJSON UA 检测页 查真实 WebView 版本 - Android 4.2–4.3 对应 WebView 62–70 左右，只支持 -webkit-box，不支持任何 flex 相关语法
- Android 5.1–6.0 虽支持
display: flex，但flex-basis: auto极不稳定，常被当 0 处理
检查三个硬性失效条件
写了 -webkit-box 却还是塌缩？大概率卡在这三处：
-
漏 viewport meta：必须有
<meta name="viewport" content="width=device-width">，否则老 WebView 按桌面宽度渲染，尺寸计算全乱 -
混用新旧写法：父容器用了
display: -webkit-box，子项却写flex: 1或justify-content，老内核直接跳过该规则 -
子项缺宽度锚点：-webkit-box 模型里，若所有子项都没设
width，它们会塌成内容宽，-webkit-box-flex就失去计算基准
真机调试时快速验证 Flex 是否启动
在 Chrome DevTools 远程调试中执行：
getComputedStyle(document.querySelector('.container')).display
如果返回 "block"，说明 Flex 容器完全未激活；返回 "-webkit-box" 才算进入降级流程。此时再查 webkitBoxOrient、webkitBoxPack 等属性值是否匹配预期。
- 对应关系要手动转换：
-webkit-box-orient: horizontal→flex-direction: row -
-webkit-box-pack: center→justify-content: center - 子项用
-webkit-box-flex: 1（数值权重），不是flex: 1（语义组合）
避免依赖 autoprefixer 自动修复
Autoprefixer 只补前缀，不改模型。它能把 justify-content 补成 -webkit-justify-content，但不会把 flex: 1 拆成 width: 0; -webkit-box-flex: 1。对 Android 4.0–4.3，关键布局必须手动重写：
- 需撑满的子项 → 改用
width: 100%+display: block - 多行布局 → 放弃
flex-wrap，改用float: left+overflow: hidden父容器 - 顺序调整 → 老内核不支持
order，HTML 结构得按目标顺序写死
