Android 4.4以下需手动降级Flex布局，因旧内核根本不识别display: flex及其任何前缀；Autoprefixer仅补语法前缀（如-webkit-flex），无法将flex: 1等语义转换为老式box模型，关键布局必须改用width/float/HTML重排等原生方案。
Flex属性在Android 4.4以下直接失效怎么办
老安卓机（特别是4.3及更早）对display: flex支持极差，部分机型连flex-direction都解析成block，不是“样式没生效”，而是整个Flex上下文被浏览器忽略。Autoprefixer本身不修复这个底层缺失，它只补前缀——而这些旧内核连带前缀的display: -webkit-box都不认。
autoprefixer能补哪些前缀、哪些补不了
Autoprefixer对Flex的处理分两层：一是语法级降级（如把display: flex转成display: -webkit-box），二是属性级补全（如给justify-content加-webkit-justify-content）。但它不会把flex: 1展开成-webkit-box-flex: 1这种老式box模型写法，因为语义已不等价。
- 能补：
display: -webkit-flex、-ms-flexbox、flex-direction系列带前缀的写法 - 不能补：
flex-wrap: wrap在Android 4.2 WebView里根本无对应前缀实现 - 注意：
align-items: center转成-webkit-box-align: center后，在Android 4.0上仍可能垂直错位——这是内核bug，不是前缀问题
配置autoprefixer时必须设对browserslist
很多人配了autoprefixer但没生效，核心是browserslist没覆盖真实目标机型。Android Webview版本和Chrome版本不一致，不能只写android >= 4.4。
- 要写成：
android 4.2、android 4.3（明确列出，不能用范围） - 搭配
last 2 versions会漏掉老安卓，因为它的“last version”可能是Chrome 70+，跟WebView无关 - 验证方法：运行
npx autoprefixer --info，看输出里是否包含android 4.2
光靠autoprefixer不够，还得手动降级关键布局
当目标必须兼容Android 4.0–4.3时，autoprefixer只是辅助，真正要命的是Flex容器内部逻辑。比如flex: 1撑满父容器，在老内核里得换成width: 100% + display: block，否则子元素直接塌陷。
立即学习“前端免费学习笔记（深入）”；
- 避免用
flex-grow/flex-shrink，改用width或height固定值 -
flex-wrap完全放弃，用float或inline-block模拟多行 - 如果用了
order，必须重排HTML结构——老内核不支持重排序 - 示例：原本
.item { flex: 1; }→ 改成.item { width: 50%; float: left; }，并确保父容器有overflow: hidden
真正的兼容性瓶颈不在要不要加前缀，而在Flex的抽象能力在老引擎里压根不存在。你写的display: flex再标准，遇到Android 4.1 WebView，它就当没看见——这时候代码里留多少-webkit-前缀都没用。
