autoprefixer不支持flex语法转换，仅根据browserslist为标准display: flex添加旧引擎前缀；ie11需显式配置browserslist并启用flexbox: '2009'，android 4.2–4.3等内核根本无法识别任何flex前缀，必须降级布局方案。
Autoprefixer 本身不“支持 flex”，它只按 browserslist 配置，在你写了标准 display: flex 的前提下，补上对应旧引擎能认的前缀；写错、漏写、或目标浏览器压根不识别 display: -webkit-box，它不会救你。
为什么 display: flex 在 IE11 没生成 -ms-flexbox？
两个硬性条件缺一不可：
- 你的
browserslist必须显式包含IE >= 11（不能只写last 2 versions，那默认不含 IE） - Autoprefixer v10+ 默认关闭老式 Flexbox 支持，必须手动启用：
require('autoprefixer')({ flexbox: '2009' }) - 如果源码里已存在
display: -webkit-flex，Autoprefixer 会跳过整条声明——它认为你已接管兼容逻辑
Android 4.2–4.3 真的加了前缀也没用？
是的。这些版本的 WebView 内核（WebKit 534）连 display: -webkit-box 都不识别，Autoprefixer 补的 -webkit-flex 或 -ms-flexbox 全部无效。
- 必须显式在
browserslist中写android 4.2、android 4.3，不能用范围语法 - 运行
npx autoprefixer --info，确认输出里真有android 4.2—— 否则配置白搭 - 这类环境只能降级：用
float+width替代flex: 1，用inline-block模拟多行，HTML 结构可能得重排
哪些 flex 属性 Autoprefixer 根本不补？
它只补“有标准映射关系”的前缀，以下属性在旧环境失效，且 Autoprefixer 不会生成任何等价代码：
-
gap/row-gap：Safari 14.1 以下、IE、多数安卓 WebView 完全忽略，无对应前缀 -
flex-wrap: wrap-reverse：IE10/11 和 Android 4.4 WebView 均不支持 -
align-content：IE10 无对应属性；IE11 需-ms-flex-line-pack，但默认不启用该映射 -
flex-basis: content：所有旧引擎都不认，-ms-flex-preferred-size: content是无效值
手写 fallback 时最容易被忽略的细节
就算 Autoprefixer 输出了 display: -webkit-box，布局仍可能崩，因为老内核对属性组合极其敏感：
-
display: -webkit-box必须配-webkit-box-orient: horizontal（或vertical），否则某些 Android 4.3 机型直接当block渲染 - IE10/11 要两套声明并存：
display: -ms-flexbox必须写在display: flex前面，顺序颠倒就失效 - 你删了
browserslist里的 IE11，但代码里还留着-ms-flex-pack—— Autoprefixer 不会帮你清理，也不会报错
真正卡住人的从来不是“要不要加前缀”，而是 display: flex 这行代码在目标设备上是否被解析为一个有效的布局上下文；一旦内核无视它，后面所有 flex 属性都归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
