flex布局兼容底线是ie10+（需-ms-前缀）、edge12+、chrome21+、firefox20+、safari6.1+；ie9及更早版本完全忽略display:flex导致布局塌陷，须用@supports配合传统布局降级。
Flex 布局本身会降低老浏览器兼容性，不是提升兼容性的方案；它需要配合降级策略才能在真实项目中安全落地。
Flex 布局的兼容性真实底线是什么
原生 display: flex 在 IE10+（需 -ms- 前缀）、Edge 12+、Chrome 21+、Firefox 20+、Safari 6.1+ 支持。IE9 及更早版本完全不识别，直接忽略该声明——这意味若没写 fallback，布局会彻底塌陷。
常见错误现象：flex 容器内子项垂直居中失效、宽度错乱、顺序颠倒，但控制台无报错，只因浏览器“假装没看见”display: flex。
- IE10 需加
display: -ms-flexbox，且部分属性名不同（如flex-direction→-ms-flex-direction） - Safari 6.1–8.0 对
flex-wrap: wrap和align-content支持不完整 - Android 4.3 及以下 WebView 中
flex: 1行为异常，推荐用flex: 1 1 auto
如何给 Flex 布局写可靠降级
不能依赖自动回退，必须显式提供非 Flex 的布局路径。最稳妥的方式是「层叠式声明」：先写传统布局，再用 Flex 覆盖。
示例：一个卡片列表，在不支持 Flex 的环境里退化为 float 或 inline-block：
card {
display: inline-block;
vertical-align: top;
width: 300px;
}
@supports (display: flex) {
.card-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
display: block;
flex: 1 1 300px;
}
}
-
@supports比 CSS 前缀检测更可靠，避免误伤已加前缀但实际不支持的场景 - 避免对同一元素同时写
float和flex，IE9 会执行float，但 Flex 容器子项若也设了float，可能引发渲染冲突 - 移动端可考虑用
display: table-cell作为中间层降级，比float更易控高宽
autoprefixer 能解决哪些问题，又藏了什么坑
autoprefixer 只补前缀，不解决逻辑兼容性。它默认目标（如 last 2 versions）可能漏掉你实际要支持的 IE11 或 Android 4.4。
- 必须显式配置
browserslist，例如：ie >= 11, iOS >= 9, Android >= 4.4 - 它不会为你补
flex-wrap的 IE10 等价写法（-ms-flex-wrap），因为该属性在 IE10 中根本不存在 - 当使用
flex: 0 0 auto时，autoprefixer 不会改写——但 IE10 要求写成-ms-flex: 0 0 auto才生效，需手动补全
真正影响兼容性的，从来不是 Flex 写得够不够“标准”，而是你有没有在 @supports 外围预留视觉一致的兜底结构、有没有验证 IE11 下 flex-basis 与 width 的优先级表现、有没有发现 Safari 旧版把 min-width: fit-content 当作无效声明而意外触发收缩。这些细节不跑真机、不查 Can I Use 的具体版本表格，光靠 autoprefixer 或“加个前缀”就上线，迟早出事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
