Flex布局在IE10–IE11中部分失效，仅支持旧版-ms-flexbox语法，且flex-wrap、align-content、gap等属性支持不全或行为异常；iOS Safari 9–10存在flex-wrap换行错位bug；深度嵌套影响性能；需手动降级而非依赖autoprefixer。
Flex布局在IE10–IE11中会部分失效
Flex布局在现代浏览器（Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+）中基本无兼容问题，但IE10–IE11是主要雷区：它们只支持旧版语法（display: -ms-flexbox），且对flex-wrap、align-content、gap等属性支持不全或行为异常。
常见错误现象包括：子元素堆叠成单行不换行、justify-content: space-between 失效、flex: 1 不撑开剩余空间。
- 必须为IE10/11添加
-ms-前缀，例如：display: -ms-flexbox、-ms-flex-align: center -
flex-direction: column-reverse在IE11中不被识别，需用-ms-flex-direction: column-reverse（但仍有渲染偏差） - 避免在IE场景下使用
gap——它在IE中完全无效，改用margin模拟
autoprefixer不能覆盖所有IE Flex兼容问题
虽然autoprefixer能自动补全-webkit-、-ms-等前缀，但它只处理标准语法到旧语法的映射，无法修复IE引擎本身的bug级限制。
例如：flex: 0 1 auto在IE11中可能被解析为flex: 0 1 0px，导致宽度坍缩；又如min-width: max-content与Flex结合时，在IE中直接忽略。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 检查
browserslist配置是否真包含ie >= 10（仅写last 2 versions会漏掉IE） - 对关键布局容器，手动加一层
display: -ms-flexbox并显式设置-ms-flex-pack/-ms-flex-align - 用
@supports (display: flex)做渐进增强，把IE专用样式单独包裹
移动端Safari 9–10的Flex换行bug很隐蔽
iOS Safari 9.0–10.3（对应iPhone 6s–iPhone 7早期系统）存在flex-wrap: wrap与max-width组合时的换行错位：子项本该换行却溢出父容器，尤其在字体加载完成或动态插入内容后更明显。
这不是CSS书写错误，而是WebKit旧内核的渲染竞态问题。
- 临时修复：给父容器加
min-width: 0或width: 100%（触发BFC） - 避免对Flex子项同时设
flex: 1和max-width，改用flex-basis控制基准尺寸 - 若用
rem单位，确保根字号未被JS动态修改——Safari 9对rem重计算不及时，加剧换行异常
Flex嵌套层级超过3层时性能下降明显
Chrome 80+ 和 Firefox 75+ 在深度Flex嵌套（如div > div > div > div全设display: flex）下，布局重排耗时可能翻倍，尤其配合transform动画时易掉帧。
这不是兼容性问题，但直接影响用户可感知的“运行是否流畅”。
- 优先用
grid替代多层Flex嵌套（display: grid对嵌套更友好） - 将非交互区域的Flex容器改为
display: block+margin/text-align模拟布局 - 用
will-change: transform仅标记真正需要动画的最内层容器，避免全链路提升图层
Flex本身没有“不兼容”的绝对结论，但IE10–11和旧版Safari的实现差异太深，靠工具链很难兜底。真正稳妥的做法是：明确目标环境，对关键路径做手动降级，而不是指望一套CSS走天下。
