ie11中display: flex失效需同时声明display: -ms-flexbox和display: flex，并补全-ms-前缀属性；flex: 1应改为flex: 0 0 33.333%等显式值，配box-sizing: border-box；文字省略需嵌套div处理；父容器须设明确高度，子项禁用height/max-height；响应式断点必须重写flex-basis。
IE11里display: flex直接失效怎么办
不是Flex没加载，而是IE11对display: flex的识别有断层：它只认display: -ms-flexbox（旧草案），且必须和现代写法共存。单写display: flex在IE11里等于没写。
- 必须同时声明：
display: -ms-flexbox+display: flex，顺序无所谓，IE11会跳过后者、执行前者 -
flex-direction要补-ms-flex-direction，justify-content要补-ms-flex-pack（IE11也支持-ms-justify-content，但优先用-ms-flex-pack更稳） -
align-items: center在IE11中容易错位，建议改用-ms-flex-align: center，并确保父容器有明确高度（哪怕height: 1px）
flex: 1导致子项死挤一排、文字溢出
IE11把flex: 1解析成flex: 1 1 0%，那个0%让浏览器失去换行判断依据——flex-wrap: wrap形同虚设。
- 别用
flex: 1或flex: 1 1 auto，IE11会把auto当0处理 - 三栏布局写
flex: 0 0 33.333%，两栏写flex: 0 0 50%，小数点不能省，33%可能被截断为0 - 配套加
box-sizing: border-box，否则padding和border会让实际宽度超限 - 文字省略
text-overflow: ellipsis在Flex子项中大概率失效，得包一层<div>，再在内层设<code>width: 100%+white-space: nowrap+overflow: hidden子项高度塌陷、不撑满父容器
这不是
align-items: stretch失效，而是IE11对“stretch”的触发条件更苛刻：父容器必须有明确交叉轴尺寸（比如height），且子项不能有任何height或max-height约束。- 父容器加
height: 100vh或min-height: 200px，min-height: 100%在IE11中基本不可靠 - 子项移除
height/max-height，改用min-height+flex-shrink: 0 - 表单控件如
<input>默认带height，需重置：input { height: auto; min-height: 1.2em; } - 如果父容器是
flex-direction: column，子项撑高要看justify-content或自身height，align-items此时管的是水平对齐
响应式断点里flex-basis不更新
IE11不会动态重算已渲染的
flex-basis值。你在桌面端设了flex-basis: 33.333%，切到移动端后，即使媒体查询生效，IE11仍沿用旧值。- 每个关键断点都必须显式重写
flex-basis，不能依赖继承 - 移动端单列就写：
@media (max-width: 768px) { .item { flex-basis: 100%; } } -
flex-wrap: wrap本身没问题，问题出在没给它提供可比较的flex-basis值；删掉所有flex-basis: auto，这是IE10/11里的高风险陷阱 - 涉及
gap的布局，IE11完全不支持，降级用margin模拟：父容器负边距 + 子项正内边距
- 父容器加
