低版本安卓（4.3及更早）必须降级为display: -webkit-box，因内核压根不识别display: flex或-display: -webkit-flex；需严格按顺序声明display: -webkit-box在前、display: flex在后，并手动转换box-orient、box-pack等属性，同时配viewport、禁混用新旧语法、设显式宽度锚点。
低版本安卓（4.3 及更早）根本不识别 display: flex，所谓“修复”不是加前缀就能解决，而是必须降级到 display: -webkit-box 并手动重写整套逻辑。
为什么 display: -webkit-flex 完全无效？
Android 4.1–4.3 的 WebView 内核（WebKit 534）压根没有 display: -webkit-flex 这个概念——它既不是标准草案，也没被任何厂商实现。你写上去，浏览器直接跳过整条声明，getComputedStyle(el).display 返回的仍是 block。真机调试时若看到这个结果，说明 Flex 上下文根本没建立，别再折腾前缀了。
必须手动写 display: -webkit-box 且顺序不能错
要兼容旧安卓和现代浏览器，同一选择器里必须严格按顺序声明：
.container {
display: -webkit-box;
display: flex;
}
漏掉第一行，旧安卓白屏；顺序颠倒，旧安卓直接忽略整条规则。其他属性也得一一对应转换：
立即学习“前端免费学习笔记（深入）”；
-
-webkit-box-orient: horizontal对应flex-direction: row（不是row） -
-webkit-box-pack: center对应justify-content: center -
-webkit-box-align: center对应align-items: center - 子项用
-webkit-box-flex: 1，不是flex: 1（前者是权重值，后者是语义组合）
写了 -webkit-box 还是塌缩？检查这三个硬性条件
失效往往不是代码写错，而是环境缺失：
- HTML 中漏了
<meta name="viewport" content="width=device-width">，老 WebView 按桌面模式渲染，视口宽度远超预期，尺寸计算全乱 - 混用新旧写法：父容器写
display: -webkit-box，子元素却用flex: 1或justify-content，老内核直接跳过该子项 - 子元素没设显式宽度锚点：在
-webkit-box模型里，若兄弟元素都没写width，所有项都会塌缩成内容宽，-webkit-box-flex失去计算基准
flex-basis: auto 在 Android 5.1–6.0 厂商 WebView 中不可靠
这部分系统虽支持 display: flex，但 flex-basis: auto 解析极不稳定，常被忽略或误判为 0，导致子项高度突变、内容错位。实操中必须：
- 避免依赖
flex-basis: auto，显式写flex-basis: 0或具体值（如flex-basis: 200px） - 对需拉伸的子项，用
flex: 1 1 0替代flex: 1，明确flex-basis为0 - 在
@supports (display: flex)块内做降级判断，不支持时回退到-webkit-box方案
真机测试不可替代——Chrome DevTools 的 Android 模拟器和真实 Android 5.1（WebView 39）、6.0（WebView 44）原生浏览器的渲染逻辑差两个世代，flex-basis 返回 auto 就等于没进渲染树。
