Flex布局需按浏览器版本叠加前缀：-webkit-box（Safari 6.1–7等）、-ms-flexbox（IE10）、-webkit-flex（Safari 6.1–9等）、flex（现代标准），并补充-moz-box；IE10/11需用-ms-flex属性替代flex缩写，移动端需设min-width:0解决换行bug。
Flex布局本身是标准特性，但“支持”不等于“开箱即用”——IE10 以下完全不支持，Android 4.4 及更早 WebView 对 flex-wrap、align-content 等属性解析异常，Safari 8–9 需要完整前缀链，而 iOS 12.2 之前的 Safari 对 flex: 1 在某些嵌套场景下会忽略。
哪些浏览器需要加前缀？怎么加才不漏
不能只写 display: flex 就完事。旧版浏览器识别的是不同草案版本的语法，必须按历史顺序叠加声明：
-
display: -webkit-box（Safari 6.1–7、iOS 6–7、Android 4.2–4.3） -
display: -ms-flexbox（IE10） -
display: -webkit-flex（Safari 6.1–9、Chrome 21–28、iOS 7.1–9.3） -
display: flex（现代标准）
顺序很重要：把最老的放前面，避免新浏览器被旧规则覆盖。别漏掉 -moz-box（Firefox 18–27），虽然它实际很少用，但在 Firefox ESR 版本中仍有残留影响。
IE10/11 的 flex 属性为什么失效
IE10–11 实现的是 2012 年旧草案，flex 缩写不被识别，必须拆成 -ms-flex-positive、-ms-flex-negative、-ms-flex-preferred-size。例如：
.item {
-ms-flex: 1; /* IE10–11 */
flex: 1; /* 其他浏览器 */
}
常见坑点：
-
flex: 0 1 auto在 IE 中必须写成-ms-flex: 0 1 auto，漏掉-ms-前缀就退化为默认值 -
align-self在 IE10 不支持，得用-ms-flex-item-align - 子元素设了
float或vertical-align，在 IE10 中仍会生效（其他浏览器已废弃），导致布局错位
移动端 Safari 和 Android WebView 的换行 bug 怎么绕
Android 4.4 内置 WebView 和 iOS 9.2 之前的 Safari 在 flex-wrap: wrap 下常出现项目不换行、溢出容器的问题，根本原因是它们对 min-width 的计算逻辑异常。
解决方法不是调 flex-basis，而是给每个 flex item 强制加 min-width: 0（或具体值如 min-width: 120px）：
.item {
min-width: 0; /* 关键：重置 flex item 的最小宽度约束 */
flex: 1;
}
否则，即使内容为空，浏览器也可能按内容宽度撑开，拒绝换行。这个值在 iOS 12.1 及更早版本中尤其敏感。
要不要用 Autoprefixer？怎么配才真兼容
Autoprefixer 能自动补全前缀，但默认配置（如 browserslist 设为 last 2 versions）会直接砍掉 IE 和旧 Android 支持。必须显式声明目标环境：
- 若需支持 IE10+：在
browserslist中加入ie >= 10 - 若需支持 Android 4.4：加入
Android >= 4.4 - 禁用
remove: true选项，防止它把已写的旧前缀删掉
另外，Autoprefixer 不处理 flex: 1 → -ms-flex: 1 这类属性映射，这类转换得靠 PostCSS 插件 postcss-flexbugs-fixes 补齐。
真正麻烦的从来不是写多少前缀，而是当一个 flex 容器里混用了 flex、float 和 position: absolute 时，各浏览器对“谁该优先”的解释完全不同——这种组合在调试时几乎无法预测，建议从设计阶段就禁止混用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
