旧版安卓 webview（4.3及更早）仅支持 -webkit-box 弹性盒模型，需与 display: flex 共存且顺序为先 -webkit-box 后 flex；属性须一一对应转换，不支持 flex-wrap，autoprefixer 默认不输出 -webkit-box，须手动配置或手写兼容代码。
旧版安卓 WebView 根本不识别 display: flex
Android 4.3 及更早版本（尤其是 4.0–4.3 的系统 WebView）使用的 WebKit 内核停留在 2012 年前，它只支持最原始的 Flexbox 草案语法：display: -webkit-box。这不是“加个前缀就能用”的问题，而是整套属性名、值逻辑都不同——flex-direction 对应 -webkit-box-orient，justify-content 对应 -webkit-box-pack，align-items 对应 -webkit-box-align。现代写法在这些设备上会被完全忽略，连解析都不会触发。
-webkit-box 和 display: flex 必须共存且顺序不能错
要让布局同时兼容旧安卓和现代浏览器，必须在同一选择器里按严格顺序声明：
div.container {
display: -webkit-box;
display: flex;
}
漏掉 -webkit-box，旧安卓白屏；顺序颠倒（display: flex 在前），旧安卓直接跳过整条规则。其他属性也得一一对应补全：
-
-webkit-box-orient: horizontal→ 等价于flex-direction: row -
-webkit-box-pack: center→ 等价于justify-content: center -
-webkit-box-align: center→ 等价于align-items: center - 子项不用
flex: 1，改用-webkit-box-flex: 1
旧安卓不支持 flex-wrap，换行只能靠 JS 或 DOM 拆分
-webkit-box 是单行弹性盒，没有换行概念。-webkit-box-lines 属性根本不存在，所有旧安卓 WebView 都不识别。如果你需要多行布局（比如导航菜单在小屏换行），不能依赖 flex-wrap，得换思路：
- 用媒体查询 +
display: block切换为传统流式布局 - 用 JS 检测容器宽度，动态插入
<br>或拆分 DOM 结构 - 放弃旧安卓的“自动换行”，改用固定列数 +
overflow-x: auto滚动
试图给 -webkit-box 加 flex-wrap: wrap 不会产生任何效果，它只会安静地被忽略。
autoprefixer 默认不输出 -webkit-box，必须手动开开关
autoprefixer v10+ 默认已移除对 -webkit-box 的支持，即使你配置了 browserslist 包含 android 4.3，它也不会生成任何 -webkit- 盒模型代码。必须显式启用旧语法：
- PostCSS 配置中加
flexbox: 'no-2009'不起作用，得用flexbox: '2009' - 或直接禁用 autoprefixer 的 flex 处理，改用
postcss-flexbugs-fixes+ 手写 fallback - 更稳妥的做法：把关键 flex 容器单独抽成
.legacy-flex类，手写两套规则，不依赖自动补全
别指望构建工具替你兜底——旧安卓的 -webkit-box 是纯手工活，漏一条属性，整个容器就塌陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
