IE10–IE11仅支持旧版Flexbox语法，需手动添加-ms-前缀、拆分flex简写、避免gap和flex-flow，Autoprefixer无法自动降级语义，须结合CSS fallback与JS检测实现可靠兼容。
flexbox 在 IE10–IE11 中的兼容性表现
IE10 和 IE11 支持 display: flex，但用的是旧版语法（2012 年草案），与现代标准（2016+）存在关键差异。比如 flex: 1 在 IE 中会被忽略，必须写成 flex: 1 1 auto；align-items: center 可用，但 align-content 在 IE10 中完全不生效。
常见错误现象：justify-content: space-between 在 IE10 下错位、子项高度塌陷、flex-wrap: wrap 后换行错乱。
- IE10 只识别
display: -ms-flexbox，且需搭配-ms-flex-align、-ms-flex-pack等前缀属性 - IE11 虽支持无前缀
display: flex，但仍需用-ms-前缀控制部分行为（如-ms-flex-preferred-size替代flex-basis） - 所有 IE 版本都不支持
gap属性，也不能用flex-flow缩写控制flex-direction+flex-wrap
autoprefixer 是否能覆盖全部老浏览器问题
Autoprefixer 默认只补全到 “> 1%, last 2 versions, Firefox ESR, not dead”，这意味着它不会为 IE10 自动生成 -ms-flexbox 布局，也不会把 flex: 1 拆成三值形式。
如果你的项目明确要支持 IE10，必须手动配置：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
browsers: ['IE >= 10']
};
即便如此，autoprefixer 仍不处理语义降级（例如把 flex: 1 → -ms-flex: 1 1 auto），它只加前缀，不改结构。
- autoprefixer 对
flex-direction补-ms-flex-direction是有效的 - 但它不会把
justify-content: space-evenly降级为 JavaScript 模拟或 fallback 布局 - 遇到
flex: 0 0 auto这类简写，IE10 会直接失效，必须手写完整三值并加-ms-前缀
真正可用的降级方案：CSS + JS 组合策略
纯 CSS fallback 很难覆盖所有 flex 场景，尤其涉及动态内容或响应式换行时。更可靠的做法是分层降级：
- 基础层：用
display: table-cell或float实现简单水平排列（仅适用于静态、固定数量子项） - 增强层：检测
CSS.supports('display', 'flex')，失败则加载轻量 JS 补丁（如 flexbug-fix 类工具） - 关键交互层：对
flex-wrap+ 多列布局，用@supports (display: flex) and (flex-wrap: wrap)包裹现代写法，外层用display: block+max-width保证可读性
一个典型陷阱：flex: 1 用于侧边栏自适应宽度时，IE10 下整个区域消失——这不是前缀问题，而是 IE 对 flex-basis: 0% 的解析缺陷，必须显式写 -ms-flex-preferred-size: 0。
移动端 iOS Safari 8–9 的特殊处理
iOS Safari 8.1–9.3 使用 WebKit 内核的老版本 flex 实现，虽然支持无前缀 display: flex，但存在两个高频问题：
-
flex-wrap: wrap遇到子项含min-width时，可能不换行，需配合flex-basis: 0强制重算 -
align-items: stretch在嵌套 flex 容器中失效，子项高度不继承，需显式设height: 100%或用align-self: stretch - 不支持
flex: none，得写成flex: 0 0 auto
这些不是前缀能解决的，属于引擎实现缺陷，必须靠具体场景测试 + 条件样式修正。
老浏览器的 flex 兼容从来不是“加几个前缀就完事”，而是要区分哪些行为可补、哪些必须重构、哪些只能放弃。最常被忽略的一点：IE10 下 flex-direction: column 容器里，子项的 margin-bottom 会失效，必须换用 padding 或伪元素模拟间距。
