根本原因是ie11仅支持2012年旧版flex草案，必须用-ms-前缀（如display: -ms-flexbox）、禁用flex:1等简写、显式设置flex-basis、强制edge文档模式，且加错前缀或未设高度会导致整条规则失效。
Bootstrap的CSS Flex实用类在IE11中显示异常，根本原因不是“类没生效”，而是IE11压根不识别现代Flex语法——它只认2012草案版（-ms-flexbox），且对简写、自动计算、响应式重算等行为完全不兼容。
为什么flex-row、justify-content-center这些类在IE11里全失效
Bootstrap 4/5 的 Flex 实用类（如 .d-flex、.justify-content-between）默认只输出标准 Flex 属性，而 IE11 忽略所有未带 -ms- 前缀的 Flex 相关声明。它不会“降级”或“部分生效”，而是整条规则跳过。
-
display: flex单独存在 → IE11 当作无效语句，直接忽略 -
justify-content: center→ 不匹配-ms-flex-pack: center，无对应行为 -
align-items: center→ 需要-ms-flex-align: center，否则垂直对齐完全丢失 - 即使你手动加了
-ms-前缀，若没同时写display: -ms-flexbox，其他前缀也白加
为什么flex-fill或flex-grow-1导致子项挤成一排、文字溢出
IE11 把 flex: 1 解析为 flex: 1 1 0%，那个 0% 让浏览器失去宽度基准，flex-wrap: wrap 形同虚设，子项强行撑满一行。
- 别用
flex: 1、flex-grow: 1或flex: 1 1 auto—— IE11 把auto当0处理 - 三栏布局必须写
flex: 0 0 33.333%（小数点不能省，33%可能被截断为0） - 配套加
box-sizing: border-box，否则 padding/border 会让实际宽度超限 - 父容器必须设明确高度（如
min-height: 200px），否则子项高度塌陷
为什么媒体查询切换后，flex-basis不更新
IE11 不会动态重算已渲染元素的 flex-basis 值。桌面端设了 flex-basis: 33.333%，切到移动端后，即使媒体查询生效，IE11 仍沿用旧值。
- 每个关键断点都必须显式重写
flex-basis，不能依赖继承或初始值 - 移动端单列就写：
@media (max-width: 768px) { .col { flex-basis: 100%; } } - 不要指望
flex: 0 0 100%能自动覆盖桌面端的flex: 0 0 33.333%—— IE11 不触发重计算 - 如果用了 Bootstrap 的
.col-md-4类，它内部的flex: 0 0 33.333333%在 IE11 中不会被.col-12覆盖，除非你手写媒体查询强制重置
为什么加了-ms-前缀还是不对，甚至更糟
不是所有属性都需要加 -ms-；加错、加多、顺序乱，反而让 IE11 整条 CSS 规则被丢弃。
- 必须加的只有 Flex 相关：
display: -ms-flexbox、-ms-flex-pack、-ms-flex-align、-ms-flex-direction - 绝对不要加
-ms-的：border-radius、box-shadow、transition—— IE11 原生支持，加前缀可能触发解析错误 - 必须删掉的：
appearance: none、user-select: none、含calc()的值（如border-radius: calc(0.25rem + 1px)） -
transition: all .2s在 IE11 中无效，必须拆成transition: background-color .2s, color .2s
最常被忽略的一点：IE11 是否真的运行在 Edge 模式。哪怕你写了 <meta http-equiv="X-UA-Compatible" content="IE=edge">，只要文档模式是 “7” 或 “8”，所有 Flex 前缀都毫无意义——它连 display: -ms-flexbox 都不认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
