根本原因是Android 4.2–4.3 WebView内核未实现Flexbox标准，仅识别display: -webkit-box；-webkit-flex被忽略等同block，必须双写并前置-webkit-box，配合-webkit-box-flex等老模型属性降级实现。
旧版 Android 浏览器（特别是 4.4 及更早）不兼容现代 display: flex，根本原因不是“漏加前缀”，而是内核压根没实现 Flexbox 标准——display: -webkit-flex 在 Android 4.2 WebView 里直接被忽略，必须降级到更老的 display: -webkit-box 模型。
为什么只加 -webkit-flex 没用
Android 4.2–4.3 的 WebView 基于非常陈旧的 WebKit 分支，它识别 display: -webkit-box，但完全不解析 display: -webkit-flex 或 display: flex。Autoprefixer 补了前缀也没用，因为这不是语法问题，是能力缺失。
-
display: -webkit-flex在 Android 4.2 上等同于display: block，子元素失去弹性行为 - 即使写了
flex: 1，浏览器会静默丢弃该声明，不报错也不生效 - 部分机型（如三星 GT-I9100）连
-webkit-box-orient都只支持horizontal，vertical直接 fallback 到block
-webkit-box 必须双写且顺序不能错
仅写 display: -webkit-box 不够，必须配合现代声明并控制加载顺序，让老内核优先匹配前者、新内核覆盖后者。
- 正确顺序：
display: -webkit-box;必须在display: flex;之前，CSS 解析按从上到下取第一个有效声明 - 不能只写
display: -webkit-box; display: -webkit-flex;，因为 Android 4.3 会认-webkit-flex但解析错误，导致布局错乱 - 父容器必须显式设
-webkit-box-orient，例如row→-webkit-box-orient: horizontal，column→-webkit-box-orient: vertical
-webkit-box-flex 不是 flex: 1 的简单替换
-webkit-box-flex 的数值含义和计算逻辑与现代 flex-grow 完全不同：它只参与“剩余空间”的权重分配，且前提是所有兄弟元素都用了该属性、父级已启用 -webkit-box。
立即学习“前端免费学习笔记（深入）”；
-
-webkit-box-flex: 1不等于“占满剩余宽度”，而是“拿 1 份剩余空间”；若兄弟是-webkit-box-flex: 2，则按 1:2 分配 - 如果某个子项写了
width: 200px，它会压制-webkit-box-flex，哪怕值是100 -
align-items: center对应-webkit-box-align: center，但在 Android 4.0 上可能垂直偏移——这是内核 bug，加前缀也修不了
Android 4.2–4.3 真正能靠得住的 fallback 是什么
当目标明确包含 Android 4.2–4.3 时，别指望任何 Flex 衍生语法能稳定工作。必须准备结构级降级方案。
- 水平排列：改用
float: left+ 固定百分比宽度（如width: 33.33%），父容器加overflow: hidden清浮动 - 等宽自适应：用
display: table+table-layout: fixed，子项设display: table-cell，兼容 Android 2.3+ - 避免
flex-wrap：老内核根本不支持换行，强行使用会导致子项溢出或堆叠，改用媒体查询分段布局
最易被忽略的一点：Android 4.4 WebView 虽然支持 display: flex，但 gap、flex-wrap: wrap-reverse、place-items 全都不认——这些不是前缀问题，是规范版本断层，得单独判断处理。
