IE10/IE11 完全不支持 flex-wrap（含 wrap/nowrap），即使加 -ms-flex-wrap 也无效；应改用 font-size: 0 + inline-block + calc() 模拟换行，并辅以 JS 统一行高来对齐。
flex-wrap 在 IE10/IE11 里完全被忽略
IE10 和 IE11 支持 display: flex，但不支持 flex-wrap（包括 wrap 和 nowrap 值），所有子项会被强制挤在一行，溢出容器也不换行。这不是兼容性“打折扣”，而是直接失效。
常见错误现象：flex-wrap: wrap 写了但子元素死活不折行，调试器里能看到样式被划掉（strikethrough），控制台却无报错——这是典型的“不识别属性值”表现。
- 只在 IE10/11 出现；Edge 12+ 和现代浏览器均正常
-
flex-direction: column下的换行逻辑也无效，别指望靠改方向绕过 - 即使加了
-ms-flex-wrap: wrap（IE 旧前缀）也无效——IE 根本没实现这个属性
用 inline-block + 百分比宽度模拟 flex-wrap 行为
核心思路：放弃 Flex 换行能力，退回到流式布局，靠 inline-block 元素天然的换行特性 + 精确宽度控制来逼近效果。
关键点不是“怎么写 inline-block”，而是“怎么算宽度才不因空白符或四舍五入导致意外换行”：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
font-size: 0消除inline-block间的空白间隙，子元素内再重置font-size - 子元素宽度建议用
calc(33.333% - 2px)这类带减法的表达式，预留边距空间，避免累计误差撑破行 - 避免使用
width: 33%直接写死——IE 对小数百分比计算更敏感，容易多出 0.01px 导致换行 - 如果子项有固定边框/内边距，务必在
calc()中一并减去，例如：width: calc(50% - 12px)（含左右 border/padding 共 12px）
JavaScript 动态补位：当列数不确定或内容高度不一致时
纯 CSS 的 inline-block 方案在子项高度差异大时，会出现“阶梯式错位”，视觉上不像 flex-wrap 那样自动对齐基线。这时候得靠 JS 做最小干预。
不推荐重写整个布局逻辑，只需在 DOM 加载后按行归组、统一该行最大高度即可：
const items = document.querySelectorAll('.grid-item');
let currentRow = [];
items.forEach(item => {
const top = item.getBoundingClientRect().top;
if (!currentRow.length || Math.abs(currentRow[0].getBoundingClientRect().top - top) < 2) {
currentRow.push(item);
} else {
currentRow.forEach(el => el.style.height = Math.max(...currentRow.map(i => i.offsetHeight)) + 'px');
currentRow = [item];
}
});
if (currentRow.length) {
currentRow.forEach(el => el.style.height = Math.max(...currentRow.map(i => i.offsetHeight)) + 'px');
}注意：getBoundingClientRect() 在 IE11 中返回整数像素，所以比较时留 2px 容差；该脚本需在样式已生效后执行（如 DOMContentLoaded 或 setTimeout 微任务）。
为什么不用 float 或 table-cell 替代
float 方案看似简单，但清除浮动（clear）在动态增删子项时极易失控，且 IE 对 float + margin 的盒模型计算更不稳定；table-cell 则完全无法响应式（列宽由内容撑开，width: % 失效）。
真正踩坑的是“以为加个 polyfill 就能救”——目前没有任何可靠 JS 库能真正模拟 flex-wrap 的弹性行为，尤其是涉及 flex-grow/flex-shrink 时。强行注入脚本反而增加首屏阻塞和布局抖动。
最易被忽略的一点：如果你的项目已用 PostCSS 自动加前缀，记得检查它是否误给 flex-wrap 加了 -ms- 前缀——这不仅无用，还可能干扰其他 IE 专属 hack 的判断逻辑。
