IE11的flex布局需双写语法：display:-ms-flexbox/flex，justify-content/-ms-flex-pack，align-items/-ms-flex-align；flex缩写必须带单位（如0%），禁用flex:1；box-sizing在flex中不可靠，需配合max-width:calc()；IE9需彻底降级为float或table-cell。
IE11 的 flex 布局不是“部分支持”，而是用了一套完全不同的旧草案语法（2012 年版），只写标准声明等于没写，必须成对提供两套规则，否则布局必然变形或失效。
display 和主轴对齐属性必须双写
IE11 识别的是 display: -ms-flexbox，不是 display: flex；justify-content 在 IE11 中对应的是 -ms-flex-pack，align-items 对应 -ms-flex-align。只写新语法，IE11 直接忽略整条声明。
-
justify-content: center→ 必须补-ms-flex-pack: center -
justify-content: space-between→ 补-ms-flex-pack: distribute（不是space-between） -
align-items: center→ 补-ms-flex-align: center -
flex-direction: column→ 补-ms-flex-direction: column -
-ms-声明必须写在标准声明之前，否则会被覆盖（CSS 层叠规则）
flex 缩写值在 IE11 中极易出错
IE11 解析 flex: 1 为 flex: 0 0 auto，导致子项不伸缩、宽度坍缩、换行失效；flex: 0 1 0 这种写法也会被忽略——因为 0 没单位，IE 要求 flex-basis 必须带单位（0% 或 0px）。
- 禁用
flex: 1，改用显式三值写法：flex: 0 0 33.333%（小数点不能省） - 横向等分四列？写
flex: 0 0 25%，再加max-width: calc(100% / 4)防 border 导致溢出 - 避免
flex: 1 1 0，必须写成flex: 1 1 0%或flex: 1 1 0px
IE11 下 box-sizing 和 overflow 行为异常
即使写了 -ms-box-sizing: border-box，在 flex 容器中仍可能失效，尤其当子项有 border 或 padding 时，IE11 会把边框宽度算进 flex-basis，导致单行放不下预期数量的子项。
- 强制加
max-width: calc(100% / N)（N 为每行期望数量），比依赖box-sizing更可靠 - 文字溢出容器？给子项加
max-width: 100%，IE11 下flex-shrink: 1在column+align-items: center组合下基本无效 - 避免在 flex 项目上设
height或max-height，父容器需明确设height或min-height（如height: 100vh）
IE9–IE10 需要彻底降级方案
IE9 根本不认任何 -ms-flex 声明，连 display: -ms-flexbox 都会整个忽略。此时必须用 float 或 display: table-cell 回退，且兜底样式必须写在 flex 规则之前。
- 垂直居中优先用
display: table+vertical-align: middle - 水平居中可用
text-align: center+ 子元素display: inline-block - 避免在 IE9 回退中使用
calc()、vh、vw等现代单位 -
@supports not (display: flex)对 IE11 无效（它不支持@supports），但可用于现代浏览器回退，不影响 IE
真正麻烦的不是写两套语法，而是 IE11 对 flex-shrink、flex-basis、box-sizing 的组合行为缺乏一致性——同一段代码在不同嵌套层级或不同父容器尺寸下表现可能完全不同。上线前务必在真实 IE11 环境中测试边界情况：内容超长、窗口缩放、动态增删子项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
