IE11中flex:1解析为flex:1 1 0%，导致flex-basis为0%而丧失尺寸锚点，引发子项归零、换行失效、文字截断失败等问题；必须显式声明带小数的flex-basis（如33.333%）、禁用auto、配box-sizing:border-box及重写断点值。
IE11 的 Flex 布局不是“部分不支持”，而是计算逻辑和标准浏览器根本不同——漏掉任意一个硬性条件，布局就会坍塌或飘移。必须按它认可的规则来写，而不是靠 autoprefixer 补几个前缀就完事。
为什么 flex: 1 在 IE11 里会让子项高度/宽度归零？
IE11 把 flex: 1 解析为 flex: 1 1 0%，那个 0% 是致命的：它让引擎放弃所有基于内容或容器的尺寸锚点，直接跳过换行判断、高度分配和溢出控制。
- 改用显式三值写法：
flex: 0 0 33.333%（三列）、flex: 0 0 50%（两列） -
flex-basis必须带小数，33%可能被截断为0，IE 就当没写 - 所有参与
flex-wrap的子项都得加box-sizing: border-box，否则 padding/border 会撑破百分比 - 如果子项含文字，额外加
max-width: 100%防止内容强行撑宽
为什么 position: absolute 子元素在 flex 容器里飘到左上角？
IE11 默认把 flex 容器当作 position: static 处理，不承认它是“包含块”，所以 top/left 直接相对视口定位。
- 必须给 flex 父容器加
position: relative（哪怕只是position: relative; z-index: 0） - 如果父容器已是
fixed或absolute，IE11 可能忽略其display: flex，建议统一用relative兜底 - 绝对定位子项要加
flex: none（或-ms-flex: none），否则仍可能参与 flex 分配导致尺寸异常 - 避免同时用
transform和position: absolute；IE11 执行顺序错乱，改用top/left
为什么 flex-wrap: wrap 在 IE11 里完全不换行？
IE11 不是不识别这个属性，而是它只在“检测到子项 flex-basis > 剩余空间”时才触发换行。如果 flex-basis 是 auto、0 或未声明，它永远算不出这个比较值。
立即学习“前端免费学习笔记（深入）”；
- 删掉所有
flex-basis: auto—— 这在 IE10/11 是高风险陷阱 - 每个子项都得显式设
flex-basis，比如flex-basis: 33.333% - 响应式断点中必须重写该值：
@media (max-width: 768px) { .item { flex-basis: 100%; } }，IE 不会动态更新已计算的flex-basis - 别混用
flex: 1和flex-wrap: wrap，前者强制flex-basis: 0%，等于主动关闭换行
为什么 IE11 下文字省略（text-overflow: ellipsis）失效？
IE11 要求文字截断必须有明确的“宽度约束上下文”。在 flex 容器中，width: 100% 不可靠，flex: 1 又因 flex-basis: 0% 失去锚点。
- 给文字容器加
width: 0+flex: 1，IE 下才真正触发截断逻辑 - 必须在外层再包一层
<div>，内层设white-space: nowrap; overflow: hidden; text-overflow: ellipsis - 含文字的弹性子项务必加
word-break: break-word，否则 IE 可能因尺寸误算导致整行溢出 - 避免在子项上用
margin: auto居中，IE 支持极差；改用父容器justify-content或显式margin-left: auto; margin-right: auto
真正麻烦的不是写多少代码，而是 IE11 对 flex-basis 的计算时机不可预测——它可能在父容器宽度还没确定时就拍板子项宽度。所以所有百分比值都要带小数、所有断点都要重申、所有 min-height: 0 都不能省。这些不是“最佳实践”，是能跑通的硬性条件。
