Flex布局IE10+部分支持、IE11基本完整，IE9及以下完全不支持；应采用渐进增强策略，以浮动或inline-block为基础布局，再为现代浏览器升级Flex，并用前缀、@supports或Modernizr实现兼容。
Flex 布局在 IE10+（部分支持）、IE11（基本完整）中可用，但 IE9 及更早版本完全不支持 display: flex。若需兼容 IE8/IE9，不能直接“用 Flex 降级”，而应主用传统布局，再为现代浏览器升级到 Flex——即“渐进增强”，而非“降级方案”。
优先使用浮动或 inline-block 实现基础布局
这是最稳妥的兼容起点，所有旧浏览器都支持：
- 用
float: left+width搭配clear: both实现多列布局 - 用
display: inline-block+vertical-align: top替代 Flex 的对齐能力 - 确保父容器设置
font-size: 0消除 inline-block 元素间的空白间隙（子元素内再恢复字号）
用 CSS 条件注释或 JS 检测启用 Flex
针对 IE10+，可安全启用 Flex，无需担心崩溃：
- IE10 需加
-ms-前缀：display: -ms-flexbox、-ms-flex-align: center - IE11 支持无前缀
display: flex，但部分属性（如flex-wrap）仍建议保留-ms-前缀 - 可用
@supports (display: flex)包裹现代样式（注意：IE 不支持@supports，所以它自动跳过，天然安全）
避免依赖 Flex 独有特性做核心功能
比如 flex: 1 自适应宽高、align-items: stretch 等，在旧浏览器无法模拟。应：
立即学习“前端免费学习笔记（深入）”；
- 将高度自适应改为固定高度或 JS 计算（如 jQuery.height()）
-
垂直居中改用
position: absolute + transform: translateY(-50%)或表格单元格（display: table-cell） - 换行布局（
flex-wrap）改用媒体查询 + 浮动断点控制
用 Autoprefixer 自动补全前缀，但别依赖它解决兼容逻辑
Autoprefixer 能加 -ms-、-webkit- 等前缀，但它不会帮你写两套布局代码：
- 配置目标浏览器（如
"ie >= 9"）后，它会输出 IE9+ 兼容的 Flex 前缀版本 - 但 IE8 仍需单独的样式表或条件类（如
），用独立规则覆盖 - 推荐配合 Modernizr 使用，按实际能力加载对应 CSS 规则
不复杂但容易忽略：兼容不是让所有浏览器看起来一模一样，而是保证内容可读、功能可用、结构合理。Flex 是增强手段，不是兜底方案。
