ie11中align-items: center在无height父容器上必然失效，因其严格要求父flex容器必须有明确height（如height: 1px），min-height或height: auto无法触发对齐计算，且需配合-ms-flex前缀、显式flex-direction及html/body height链才能正常工作。
IE11中align-items: center在无height父容器上必然失效
不是代码写错了，是IE11对“交叉轴高度”的计算逻辑更严格：它要求父Flex容器必须有明确的height（哪怕height: 1px），而min-height或height: auto无法触发align-items: stretch或center的拉伸行为。标准浏览器能从内容反推高度，IE11不行。
常见错误现象：align-items: center写了，子元素却紧贴顶部；开发者反复检查子元素是否float或position: absolute，其实问题在父级——控制台里getComputedStyle(container).height返回auto，就说明没生效。
- 给父容器加
height: 100%时，必须确保html和body也设了height: 100%，否则链路中断 - 用
min-height: 100vh在IE11中不可靠，部分版本会解析为0px；稳妥做法是height: 100vh+min-height: 400px兜底 - 如果父容器本身是另一个Flex项，需确认它的父级是否已设
height并传递下来——IE11不支持跨多层Flex嵌套的高度继承
IE11的align-items: stretch被忽略，导致子项不填高
IE11中align-items: stretch（默认值）常被静默降级为flex-start，尤其当子项自带height、max-height或min-height时。这不是bug，是IE11对“可拉伸”的定义更苛刻：它只对**无任何块级高度约束**的子项执行stretch。
典型场景：一个卡片组件在Chrome里高度撑满容器，在IE11里却只包住文字。查computed样式会发现子项height是auto，但实际渲染高度远小于父容器。
- 子项必须移除所有
height、max-height，改用min-height+flex-shrink: 0 - 若子项含
<input>等表单控件，IE11默认设了height，需重置：input { height: auto; min-height: 1.2em; } - 慎用
min-height: 100%：IE11需要父级有明确height才生效，且不能跨Flex层级传递
flex: 1未正确降级导致子项无法伸缩，间接破坏居中
IE11识别flex: 1但行为异常——它可能忽略flex-basis或错误计算收缩比例，结果子项高度固定、无法随容器拉伸，align-items: center自然失去作用对象。
例如一个三栏布局，中间栏设flex: 1想占满剩余空间，IE11里它却保持内容高度，导致上下留白、视觉上“未居中”。
- 必须用
-ms-flex: 1替代flex: 1，这是IE11唯一可靠写法 - 避免
-ms-flex: 1 1 auto，某些IE11版本会因auto触发意外收缩；统一用-ms-flex: 1 1 0% - 若子项含文字，加
word-break: break-word，否则IE11可能因flex计算误差导致文字溢出，进一步干扰高度判断
WebView与IE11混用时，flex-direction隐式值引发主轴误判
部分旧版WebView（如Android 4.4系统WebView、微信iOS 7.x）在解析CSS时，会将未显式声明的flex-direction默认设为column，导致你写的align-items: center实际作用在水平方向，而justify-content: center却去管垂直——结果就是“全写对了，但全没效果”。
调试时别只看Styles面板有没有flex-direction，要用getComputedStyle(el).flexDirection读取真实值。
- 强制显式声明：
flex-direction: row（水平主轴）或flex-direction: column（垂直主轴） - 微信小程序某些版本对
row兼容差，可临时用flex-direction: row-reverse+justify-content: flex-end模拟 - SVG图标作为子项时，即使父容器是Flex，IE11/WebView仍按
vertical-align: baseline对齐；必须加display: block脱离行内流
min-height够用了，IE11却说“不，我只认height”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
