autoprefixer能加-ms-flexbox前缀，但需browserslist明确包含ie>=10且源码只写display: flex；它不修复flex缩写语义崩坏、gap等新特性，仅补前缀。

PostCSS 本身不解决 IE 兼容问题，关键在于选对插件、配对 browserslist、并接受「它只补前缀，不修逻辑」这个事实。

autoprefixer 能不能自动加 -ms-flexbox 前缀？

能，但必须满足两个硬条件：

• browserslist 配置里明确包含 ie >= 10（仅写 last 2 versions 不会触发 -ms- 输出）
• 源码中只写标准语法，比如 display: flex，不能混写 display: -ms-flexbox
• autoprefixer 默认不处理 flex: 1 这类缩写在 IE10 中的语义崩坏——它只会输出 -ms-flex: 1，而 IE10 实际按 -ms-flex: 1 1 auto 解析，但又不支持三值，最终取 -ms-flex: 1 ≈ flex: 1 1 0%，子项宽度归零

postcss-flexbugs-fixes 插件真正能修什么？

它针对的是 Flexbugs 项目收录的已知渲染 bug，不是语法转换。典型可修复场景包括：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• IE10/11 中 flex-wrap: wrap 忽略容器 min-width 导致子项溢出
• align-items: center 在嵌套 flex 容器中失效（插件会注入 min-height: 0 或重置 height）
• flex: 1 子项在 IE10 中塌缩为 0 宽度时，自动补上 flex-basis: 0% 等等效降级
• 不修复 gap、place-items、flex-flow —— 这些得手动降级或弃用

为什么 postcss-flexibility 插件现在基本不用了？

它试图把现代 Flex 语法「翻译」成 IE10 的 -ms-flexbox + -ms-flex-pack 等整套老属性，但实际落地问题很多：

• 对 flex-direction: column 内再嵌套 row 的多层结构支持极差，常出现 DOM 渲染顺序错乱
• 无法处理 order 属性在 IE 中导致的视觉顺序与 DOM 顺序不一致（这得靠调整 HTML 结构）
• 和 autoprefixer 冲突：两个插件都改 display，容易生成重复或矛盾声明
• 社区已转向更务实的策略：用 autoprefixer + postcss-flexbugs-fixes 组合，再配合少量手写降级（如 display: table）

最易被忽略的一点：即使所有前缀和 bug 修复都到位，IE10/11 仍要求 Flex 容器自身有明确高度约束（height 或 min-height），否则 flex: 1 子项可能直接塌陷——这不是插件能猜出来的，得你在 CSS 里显式写死。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！