autoprefixer仅补语法前缀，不降级语义：flex:1不会转为-webkit-box-flex:1，android4.3等旧内核连display:-webkit-box都不识别，关键布局需手动降级为width/float等原生方案。
Autoprefixer 本身不解决 Flex 布局在低版本浏览器的兼容问题，它只补前缀，不降级语义——flex: 1 不会变成 -webkit-box-flex: 1，display: flex 在 Android 4.3 里压根不识别，加了 display: -webkit-box 也得手动配对其他属性。
Autoprefixer 对 Flex 的“补前缀”能力很有限
它能做的只有两件事：给已支持 Flex 的旧内核加语法前缀（比如把 display: flex 转成 display: -webkit-flex），以及给属性加对应前缀（如 justify-content → -webkit-justify-content）。但它不会：
- 把现代 Flex 语义转换成老式
display: -webkit-box模型（例如flex: 1不会生成-webkit-box-flex: 1） - 处理 Android 4.2 WebView 这类连
display: -webkit-box都不认的引擎 - 修复 IE10 中
flex-wrap完全无效的问题（IE10 根本没实现该属性） - 自动映射
align-content到-ms-flex-line-pack这种非标准别名
为什么配置了 browserslist 还是没生效
常见错误是写 last 2 versions 或 android >= 4.4，但 Autoprefixer 实际匹配的是浏览器实际 UA 对应的渲染引擎版本，不是系统版本。比如：
- Android 4.3 的 WebView 基于 WebKit 534，它不等于 Chrome 任何版本，必须显式写
android 4.3 - iOS 10.3.3 的 Safari 使用 WebKit 内核，对应
safari 10.1，但写safari >= 10可能被跳过，得用safari 10.1或ios 10.3 -
npx autoprefixer --info输出里没出现目标平台，说明 browserslist 没命中
哪些 Flex 属性 Autoprefixer 根本补不了
以下属性在老环境里失效，Autoprefixer 不会生成任何等价声明：
-
gap/row-gap/column-gap：Safari 14.1 以下、IE、大部分安卓 WebView 完全忽略，无对应前缀可补 -
flex-wrap: wrap-reverse：Android 4.4 WebView 和 IE10/11 都不支持，-ms-flex-wrap仅支持wrap和nowrap -
align-content：IE10 没有对应属性；IE11 需要-ms-flex-line-pack，但 Autoprefixer 默认不启用该映射 -
flex-basis: content：所有旧引擎都不认，-ms-flex-preferred-size: content是无效值
真正要命的是 display 声明顺序和 fallback 逻辑
就算 Autoprefixer 输出了 display: -webkit-box，如果没配合正确的子项属性，布局照样崩：
- 写了
display: -webkit-box，但忘了设-webkit-box-orient: horizontal，某些 Android 4.3 设备会当vertical解析 - 父容器写了
display: -webkit-box和display: flex，但顺序反了（flex在前），IE10 就直接跳过整条规则 - 子元素同时写了
-webkit-box-flex: 1和flex: 1，旧内核可能因解析冲突而忽略前者 - 兜底用
float或table-cell时，样式没写在 Flex 规则之前，IE9 会保留 float 却又加载了部分 Flex 声明，造成叠加错乱
最常被忽略的一点：Autoprefixer 生成的代码只是“起点”，不是“终点”。Android 4.0–4.3、IE10、iOS 8 这些环境，必须手动降级关键布局逻辑，比如把 flex: 1 撑高换成 height: 100% + position: absolute，否则光靠前缀毫无意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
