旧版安卓（4.3及更早）webview不支持flexbox，仅识别-webkit-box；需严格按顺序双写display属性，并手动适配各flex属性为-webkit-box对应值，autoprefixer默认不生成该语法。
因为旧版安卓（4.3 及更早）的 WebView 根本不解析 display: flex，连带 display: -webkit-flex 也被忽略——它只认更老的 display: -webkit-box，这不是加前缀就能修的问题，是整套模型缺失。
Android 4.3 及更早根本不识别 display: flex
这些设备用的是 2012 年前的 WebKit 内核，没有实现 Flexbox 标准。你写 display: flex 或 display: -webkit-flex，浏览器直接跳过整条规则，getComputedStyle(el).display 返回 "block"。不是“样式没生效”，是压根没进渲染流程。
display: -webkit-box 必须双写且顺序不能错
要让旧安卓和现代浏览器都工作，必须在同一选择器里严格按顺序写：
.container {
display: -webkit-box;
display: flex;
}
漏掉第一行，旧安卓白屏；顺序颠倒（display: flex 在前），旧安卓直接跳过整条规则。其他属性也得一一对应：
-
flex-direction: row→-webkit-box-orient: horizontal（不是row） -
justify-content: center→-webkit-box-pack: center -
align-items: center→-webkit-box-align: center -
flex: 1→-webkit-box-flex: 1（这是权重值，不是“占满剩余空间”）
flex-wrap 在旧安卓上完全无效
-webkit-box 是单行模型，没有换行概念。flex-wrap: wrap、-webkit-flex-wrap: wrap、甚至虚构的 -webkit-box-lines: multiple 全部被静默忽略。需要多行布局时，只能：
- 用媒体查询 +
display: block切换为传统流式布局 - 用 JS 检测容器宽度，动态拆分 DOM 结构
- 放弃自动换行，改用固定列数 +
overflow-x: auto
Autoprefixer 默认不生成 -webkit-box 代码
v10+ 版本已移除对 -webkit-box 的支持。即使配置了 browserslist: ["android 4.3"]，它也不会输出 -webkit-box-flex: 1 或 -webkit-box-pack。必须显式启用旧语法（flexbox: '2009'），或更稳妥地：把关键容器抽成 .legacy-flex 类，手写两套规则。
真正容易被忽略的是 viewport 和父容器尺寸——漏掉 <meta name="viewport" content="width=device-width">，或者父容器没设宽高，-webkit-box 就会按桌面模式计算，所有伸缩逻辑全乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
