Flex布局在旧浏览器中兼容性差，需结合前缀、降级和@supports检测：IE9及以下完全不支持；Autoprefixer可自动添加必要前缀；对不支持环境应降级为table/float/inline-block等方案，并规避flex-wrap、align-self等高风险特性。
Flex 布局在现代浏览器中表现良好，但在旧版浏览器（如 IE 9 及更早版本、Android 4.3 及以下、iOS 7.1 及以下）中支持不完整或完全不支持。解决兼容性问题不能只靠加前缀，关键在于合理判断目标环境 + 分层降级 + 有选择地使用前缀。
明确哪些 flex 属性需要前缀
不是所有 flex 相关声明都需要加前缀。真正需要的主要是早期 WebKit 和旧版 IE 的私有语法：
-
display: flex → 需要
-webkit-box（Safari 6.1–7.0、iOS 7.0）、-ms-flexbox（IE 10） -
flex-direction / justify-content / align-items → 对应加
-webkit-或-ms-前缀（如-webkit-justify-content、-ms-flex-pack） -
flex: 1 → 旧版需写成
-webkit-box-flex: 1（WebKit）或-ms-flex: 1（IE 10） -
order → IE 10 需用
-ms-flex-order，WebKit 旧版用-webkit-box-ordinal-group
注意：IE 9 及以下完全不支持 flex，任何前缀都无效，必须走降级方案。
用 Autoprefixer 自动补全前缀
手动写多套前缀易出错且难维护。推荐使用构建工具集成 Autoprefixer，它会根据 browserslist 配置自动注入所需前缀：
立即学习“前端免费学习笔记（深入）”；
- 在项目中配置
"browserslist": ["> 1%", "last 2 versions", "IE >= 10"] - 它会为 IE 10、Android 4.4+、iOS 8+ 等生成对应前缀，但不会为 IE 9 添加（因不支持）
- 配合 PostCSS 使用，零成本解决大部分“该加什么前缀”的纠结
对不支持 flex 的浏览器做样式降级
当目标用户仍包含 IE 9 或 Android 4.2 等环境时，需提供替代布局。常见策略：
- display: table / table-cell：兼容 IE 8+，适合简单行/列对齐，但语义弱、嵌套受限
- float + margin：经典方案，需清除浮动，响应式处理较麻烦
- inline-block + vertical-align：适合等高布局，注意换行符产生间隙
-
@supports 检测 + 回退规则：例如先写 float 布局，再用
@supports (display: flex) { ... }覆盖为 flex
示例：
.container {*zoom: 1;
*display: inline-block;
}
.item {
float: left;
width: 33.33%;
}
@supports (display: flex) {
.container { display: flex; }
.item { float: none; flex: 1; }
}
避免踩坑：慎用某些 flex 特性
部分 flex 行为在旧版中差异大，建议规避或额外测试：
- flex-wrap: wrap：IE 10 不支持，IE 11 才完善；降级时改用固定高度 + overflow 或 JS 控制换行
-
align-self / place-items：IE 10–11 支持有限，建议统一用容器级
align-items -
flex-basis auto / content：旧版解析不稳定，优先用具体数值（如
flex-basis: 200px） - 不要依赖
min-height: 100vh+ flex 垂直居中：iOS Safari 7–8、Android Browser 4.4 存在视口高度计算 bug
