ie10/11 中 flex-basis 被完全忽略，需用 -ms-flex + width 双声明并设 box-sizing: border-box 兜底。
flex-basis 在 IE10/IE11 中被忽略的典型表现
在 IE10 和 IE11 中，flex-basis 常被完全无视，元素会退回到 width 或 auto 行为，导致布局错位。这不是“部分支持”，而是渲染引擎压根没读取该属性值——哪怕你写了 flex-basis: 200px，它也当没看见。
常见错误现象包括：
- 预期等宽三栏布局，结果第一项撑满容器，后两项挤成窄条
-
flex: 0 0 33.33%失效，实际宽度由内容撑开 - 使用
min-width+flex-basis组合时，min-width生效但flex-basis不生效
用 width 替代 flex-basis 的实操条件
直接用 width 替代 flex-basis 只在特定场景下可行，不是无脑替换。关键看你的 flex 项是否处于「不收缩」或「不拉伸」状态：
- 如果用了
flex: 0 0 auto或flex: none，那width就是最终尺寸，可安全替代flex-basis - 如果用了
flex: 1或flex: 1 1 auto，width会被忽略（IE 下尤其明显），此时必须改用flex: 1 1 <value></value>并确保<value></value>是具体长度（如200px） - IE 对
flex: 1 1 0支持尚可，但对flex: 1 1 auto中的auto解析极不稳定，建议全写死为像素或百分比
IE10/11 中 flex 属性写法的兼容陷阱
IE10/11 使用的是旧版 Flexbox 语法（2012 年草案），和现代标准差异不小，光靠加前缀不够：
- 必须同时写两套声明：
flex: 0 0 200px和-ms-flex: 0 0 200px，后者不能省略 -
-ms-flex不支持content、max-content等关键字，只认px、%、em这类绝对/相对长度 - 如果父容器用了
display: -ms-flexbox，子项的-ms-flex才真正生效；若只写display: flex，IE 下整个 flex 上下文可能降级为 block - 慎用
flex-wrap: wrap+flex-basis组合——IE 中换行判断逻辑不同，容易出现“本该换行却硬挤在一排”的情况
一个最小可行的兼容写法示例
下面这段代码能在 Chrome/Firefox/Safari 和 IE10+ 中保持一致的等宽三栏行为：
.container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
<p>.item {
-ms-flex: 0 0 33.33%;
flex: 0 0 33.33%;
/<em> IE 需要额外兜底 width，否则某些场景下仍会失效 </em>/
width: 33.33%;
}</p>
注意：width 在这里不是“主要方案”，而是给 IE 的保险绳——它只在 -ms-flex 因解析异常失效时起作用。现代浏览器会优先按 flex 计算，忽略 width。
真正容易被忽略的是：IE 中 box-sizing 默认不是 border-box，如果子项有 padding 或 border，33.33% 就会溢出。务必统一加上 box-sizing: border-box。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
