Autoprefixer默认不生成-ms-flexbox，因v10+禁用flexbox: '2009'；需显式配置flexbox: '2009'、browserslist含"IE 11"，并确保postcss-loader在css-loader前且顺序正确。
为什么 display: flex 编译后没出现 -ms-flexbox？
Autoprefixer 默认不生成 IE 10/11 的旧 Flexbox 语法（display: -ms-flexbox），它只按标准规范加现代前缀（如 -webkit-flex）。要让 Flex 布局真正在 IE 11 下跑起来，必须显式启用旧语法支持。
-
flexbox: 'no-2009'是关键参数，得传给autoprefixer()构造函数，否则插件完全忽略 -ms- 前缀 -
browserslist配置里必须包含"IE 11"或等效写法（如"ie >= 11"），否则 Autoprefixer 查询 Can I Use 数据库时直接跳过 IE 规则 - 运行
npx browserslist确认输出中真有ie 11，别只靠记忆或模糊配置（比如只写"> 1%"可能匹配不到）
postcss.config.js 中插件顺序为什么不能乱？
PostCSS 插件是链式执行的，顺序错了，postcss-flexbugs-fixes 就压根没机会修 Safari 的 Flex 渲染 bug。它必须在 autoprefixer 之前运行——因为它的 hack（比如给 flex-direction: column 补 min-height: 0）需要基于原始 Flex 声明，而不是加完前缀后的混合结果。
- 错误顺序：
autoprefixer→postcss-flexbugs-fixes：Safari 12.1 的flex-wrap: wrap + min-height错位问题照旧 - 正确顺序：
postcss-flexbugs-fixes→autoprefixer：前者先注入修复样式，后者再统一加前缀 - 这个顺序只对 Flex 相关 bug 有效；
postcss-preset-env处理语法降级，通常放最后
Webpack 中 postcss-loader 和 css-loader 冲突怎么办？
Webpack 5+ 的 css-loader 默认内置 PostCSS 支持，如果你又手动加了 postcss-loader，大概率导致配置被覆盖或插件执行两次——结果就是 flexbox: 'no-2009' 看似配了，实际没生效。
- 检查
webpack.config.js里css-loader是否启用了importLoaders: 1（或更高），否则@import的 CSS 不进 PostCSS 流程 - 若同时用了
postcss-loader，确保它在css-loader之前（即 loader 执行链：预处理器 →postcss-loader→css-loader） - 更稳妥的做法：禁用
css-loader的内置 PostCSS（设css-loader的importLoaders: 0），把所有 PostCSS 逻辑收归postcss-loader统一管理
gap、place-items 这类新属性为啥补不了前缀？
Autoprefixer 只补前缀，不转译语法。IE 11 根本不支持 gap，它不会帮你模拟成 margin；place-items: center 在 Safari 14.1 下失效，也不是缺前缀，而是该属性需拆成 align-items + justify-items ——这超出了 Autoprefixer 能力范围。
- Flex 布局兼容 IE 11 的底线是：只用
display: flex、flex-direction、justify-content等基础属性，避开gap、place-items、flex-wrap: wrap-reverse等高阶特性 - 如果非用不可，得靠
postcss-preset-env配stage: 2+ 显式开启features，但注意它对 IE 11 的支持非常有限 - 最易被忽略的一点：
grid: true开启后，Autoprefixer 会加-ms-grid-column，但 IE 的 Grid 实现和现代标准几乎不兼容，别指望写了grid-template-areas就能自动跑通
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
