IE10/11中flex-basis:auto是高风险陷阱，常被忽略或解析为0，导致布局错乱；应改用flex-basis:0%并配合-ms-flex、box-sizing:border-box等双声明兜底。
flex-basis: auto 在 IE10/11 中不是“推荐写法”，而是高风险陷阱——它常被忽略或解析为 0，导致布局彻底错乱。
IE10/11 中 flex-basis: auto 的真实表现
IE10 完全不识别 flex-basis: auto，会退回到 width 或 auto 的块级行为；IE11 虽能解析该值，但计算时机错误：它在父容器尺寸未稳定前就拍板子项基准宽，结果常是 0 或远小于预期。典型现象包括：
- 三栏等宽布局中，第一项占满整行，后两项挤成细条
-
flex: 0 0 auto等价于flex: none，但在 IE 下实际渲染为无宽度 - 配合
min-width使用时，min-width生效，flex-basis: auto彻底失效
为什么 flex-basis: 0% 比 auto 更可靠
IE10/11 对百分比值的解析锚点明确（以父容器当前宽度为参照），且不会跳过计算流程。关键点：
-
flex-basis: 0%在 IE10 中可被-ms-flex-preferred-size: 0%正确捕获，而0（无单位）会被直接忽略 -
flex: 1在 IE 中展开为flex: 1 1 0%，这个0%是换行和伸缩逻辑的起点，不能省略单位 - 若需内容自适应，应写
flex-basis: auto+flex-shrink: 0，而非单独依赖auto
真正可用的 IE 兼容写法组合
不要只改 flex-basis，要同步处理声明方式、前缀、盒模型：
立即学习“前端免费学习笔记（深入）”；
- 必须双写：
flex: 0 0 33.33%和-ms-flex: 0 0 33.33%（-ms-flex不支持auto或content） - 父容器加
display: -ms-flexbox（IE10 必须），子项才认-ms-flex - 所有子项强制
box-sizing: border-box，否则 padding/border 会让百分比失效 - 避免
flex-wrap: wrap+flex-basis: auto组合——IE11 会拒绝换行，硬挤在一排
响应式场景下 flex-basis 的重置要点
IE11 不会动态更新已计算的 flex-basis 值。媒体查询中必须显式重写：
- 桌面端写
flex-basis: 33.33%，移动端断点里必须再写一遍flex-basis: 100% - 用
33.333%而非33%，IE 对小数截断敏感，33%可能被当成0 - 若子项含图片或长文本，优先用
max-width+ 固定flex-basis，别指望flex-grow自动均分
最易被忽略的一点：IE 中 flex-basis 的生效前提是整个 flex 上下文被正确识别——漏掉 display: -ms-flexbox 或写错 -ms-flex 参数顺序，后面所有设置都白搭。
