IE11中flex-wrap: wrap换行失效的主因是flex-basis: auto或0%导致换行判断失效，应显式设置百分比flex-basis（如33.33%）、配合box-sizing: border-box，并在媒体查询中重复声明以确保响应式正确。
IE11里flex-wrap: wrap不按预期换行？加flex-basis不是万能的
IE11对弹性布局的实现有硬伤：当子项没设flex-basis（或设为auto）时，即使容器宽度不足，它也倾向把所有子项挤在一行，直到溢出。这不是“不支持换行”，而是它把flex-basis: auto理解成“先按内容宽度撑开，再考虑换行”，结果就是视觉上卡死。
实操建议：
- 给每个弹性子项显式设置
flex-basis，比如flex-basis: 33.33%对应三列布局 - 避免用
flex-basis: auto或省略该值——IE下这等于放弃控制权 - 如果子项宽度不固定（如文字长度差异大），优先用
max-width配合flex-basis，而不是只靠flex-grow - 别依赖
flex: 1这种简写——它在IE中展开为flex: 1 1 0%，而0%会让IE彻底忽略换行逻辑
为什么百分比flex-basis在IE里更稳？
IE11解析flex-basis时，对非百分比值（如px、em、auto）的计算时机和参照系很混乱。它常在父容器尚未完成尺寸计算前就拍板子项基准宽，导致换行判断失效。而百分比值强制它以父容器当前宽度为锚点，哪怕这个宽度是初始渲染后的近似值，也比瞎猜强。
注意点：
立即学习“前端免费学习笔记（深入）”；
-
flex-basis: 33.33%比flex-basis: 33%更安全——IE对小数精度容忍度低，33%可能被截断为0 - 必须配合
box-sizing: border-box，否则padding/border会撑出实际宽度，让百分比失效 - 如果父容器用了
min-width或max-width，IE可能在响应式断点处重新计算flex-basis，需测试临界值
flex: 0 0 33.33%比flex: 1更适合IE换行场景
很多人以为flex: 1能让子项均分又自动换行，但在IE里它等价于flex: 1 1 0%。那个0%是致命的：IE把它当作“无基准宽度”，直接跳过换行判定流程。
正确写法是拆开写，明确控制三项：
-
flex-grow: 0——禁止拉伸，避免挤占换行空间 -
flex-shrink: 0——禁止压缩，防止窄屏下文字被强行缩成一团 -
flex-basis: 33.33%——提供稳定换行锚点
示例：flex: 0 0 33.33%比flex: 1或flex: 1 1 auto在IE11中换行行为可靠得多。
响应式下flex-basis要随媒体查询重置
IE11不会动态更新已计算的flex-basis值。如果你只在桌面端写了flex-basis: 33.33%，切换到移动端后，即使媒体查询生效，IE仍可能沿用旧值，导致单列变两列时错位。
解决方案很简单：
- 在每个关键断点的媒体查询里，重复声明
flex-basis，比如@media (max-width: 768px) { .item { flex-basis: 50%; } } - 不要指望
inherit或unset能兜底——IE对这些关键字的支持极差 - 如果用CSS预处理器，把
flex-basis抽成变量，避免漏写
IE的弹性布局bug本质是计算链断裂，不是功能缺失。你得主动给它每一步都钉死参照物，而不是期待它自己推理。
