flex兼容性问题主要出在ie10/11、android 4.1–4.3、safari 7–8等旧浏览器，需按顺序声明多版本前缀（如display: -webkit-box; → -ms-flexbox; → -webkit-flex; → flex），并注意ie10/11中子项需设显式宽高以避免flex失效。
Flex 布局本身不影响兼容性，真正影响兼容性的，是写法是否覆盖了目标浏览器支持的语法版本。
哪些浏览器会出问题？
IE10/11 是最常踩坑的场景：它只支持 display: -ms-flexbox，不认标准的 display: flex；Android 4.1–4.3 只支持老式 display: -webkit-box；Safari 7–8、iOS Safari 7.0–8.3 虽然支持 display: -webkit-flex，但对 flex-wrap、align-content 等属性支持不全。
- IE9 及以下完全不支持任何 Flex 语法，必须降级为
float/inline-block或用 JS 补丁 - 哪怕写了
display: flex，没加-ms-或-webkit-前缀，IE10/11 和旧版 Safari 就直接回退到块级流布局 - 某些安卓 WebView（如微信内置）在 Android 4.4 之前，只识别
-webkit-box，连-webkit-flex都不处理
怎么写才真正兼容？
靠手写多行声明 + 工具自动补全前缀，不是二选一，而是都要做。手动声明确保兜底，工具保证长期可维护。
- 容器必须按顺序写：
display: -webkit-box;→display: -ms-flexbox;→display: -webkit-flex;→display: flex;（浏览器取第一个它认识的） - 子项属性同理，比如
flex要写成：-webkit-box-flex: 1;、-ms-flex: 1;、-webkit-flex: 1;、flex: 1; - 不能省略
width或min-width：IE10/11 中若子项没显式宽度，flex: 1可能失效，尤其在flex-direction: row下 - 避免用
align-items: stretch配合未设高的子项——这是 IE10/11 的经典渲染 bug，建议统一设min-height: 0或height: auto
autoprefixer 能不能全靠它？
可以，但必须配对使用：源码里只写标准语法（display: flex），交给 autoprefixer 输出带前缀的 CSS；但前提是 browserslist 配置要准，否则它不会生成 -ms- 或 -webkit-box。
- 若项目需支持 IE10，
browserslist至少得包含ie >= 10，否则autoprefixer默认不输出-ms-前缀 - Android and_chr 或
safari ，不然 <code>-webkit-box不会生成 - 注意：
autoprefixer不处理老式语法（如box-pack），它只转换标准语法 → 厂商前缀，所以源码绝不能混写display: box
最易被忽略的是：Flex 容器自身高度未设时，IE10/11 的 flex: 1 子项可能塌缩为 0 高——这不是前缀问题，是渲染引擎对“无约束主轴”的处理差异，必须用 min-height 或 height 显式锚定容器高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
