旧版安卓（4.3及更早）不支持display: flex，仅识别display: -webkit-box；需严格按顺序声明且属性值不一一对应，flex-wrap完全无效，autoprefixer默认不生成兼容代码。
旧版安卓（4.3及更早）根本不认 display: flex
这不是加个前缀就能修好的问题。Android 4.3 及更早的 WebView 使用的是 2012 年前的 WebKit 内核，它只识别 display: -webkit-box 这套老式弹性盒模型。写了 display: flex 或 display: -webkit-flex，这些设备会直接忽略整条规则——连解析都不会触发。
常见错误现象：
- 页面在 Android 4.3 上白屏或布局完全错乱
- 加了
-webkit-前缀但子项仍不伸缩、不居中 - 用了
flex-wrap: wrap却毫无换行效果
必须在同一选择器里严格按顺序写：
.container {
display: -webkit-box;
display: flex;
}
漏掉第一行，旧安卓就挂；顺序颠倒，旧安卓跳过整条规则。
-webkit-box 属性和现代 Flexbox 不是一一映射
-webkit-box-orient、-webkit-box-pack、-webkit-box-align 看似对应 flex-direction、justify-content、align-items，但值和行为有差异：
-
flex-direction: row→-webkit-box-orient: horizontal（不是row） -
justify-content: center→-webkit-box-pack: center（支持start/center/end/justify） -
align-items: center→-webkit-box-align: center（但在 Android 4.0 上可能垂直偏移，这是内核 bug，加前缀也修不了） -
flex: 1→-webkit-box-flex: 1（注意：这是权重值，不是“占满剩余空间”；若兄弟是-webkit-box-flex: 2，则按 1:2 分配）
子元素若设了 width 或 max-width，会直接压制 -webkit-box-flex 行为。
flex-wrap 在旧安卓上完全无效
-webkit-box 是单行模型，没有换行概念。-webkit-box-lines: multiple 这种写法根本不存在，所有旧安卓 WebView 都不识别 flex-wrap 及其任何变体。
需要多行布局时，不能依赖 CSS，得换思路：
- 用媒体查询 +
display: block切换为传统流式布局 - 用 JS 检测容器宽度，动态拆分 DOM 结构
- 放弃自动换行，改用固定列数 +
overflow-x: auto
试图给 -webkit-box 加 flex-wrap: wrap，只会安静地被忽略——不会报错，也不会生效。
Autoprefixer 默认不生成 -webkit-box 兼容代码
autoprefixer v10+ 已移除对 -webkit-box 的支持。即使你配置了 browserslist: ["android 4.3"]，它也不会输出 -webkit-box-flex: 1 或 -webkit-box-pack 这类声明。
要让它工作，必须显式启用旧语法：
- PostCSS 配置中设
flexbox: '2009'（不是'no-2009'） - 或直接禁用 autoprefixer 的 flex 处理，改用
postcss-flexbugs-fixes+ 手写 fallback - 更稳妥的做法：把关键 Flex 容器抽成
.legacy-flex类，手写两套规则，不依赖自动补全
验证是否生效：运行 npx autoprefixer --info，确认输出里包含 android 4.2 和 android 4.3。
真正要命的不是样式没渲染出来，而是你写的 flex: 1 在旧安卓里根本没进入布局流程——它被当成无效声明跳过了。所以关键容器必须手动降级，比如用 width: 100% + display: block 替代，否则子元素直接塌陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
