为什么CSS Flex布局在IE11中无法正常解析flex:1_手动拆分flex-grow与flex-basis-css教程-PHP中文网

ie11中flex:1需显式写为flex:1 1 0%并加-ms-flex前缀，否则解析为0px导致不等宽；父容器须设固定高度才能使flex-grow生效；margin:auto基本无效，应改用justify-content/align-items。

为什么css flex布局在ie11中无法正常解析flex:1_手动拆分flex-grow与flex-basis

IE11 把 `flex: 1` 解析成 `flex-basis: 0px` 而不是 `0%`

Chrome 和现代浏览器把 flex: 1 当作 flex: 1 1 0%，即从“零百分比宽度”起步再均分；IE11 却错误地解析为 flex: 1 1 0px。问题在于：0px 在 IE11 中会被忽略（尤其当子项有内容时），导致实际 fallback 到 flex-basis: auto，于是宽度又按文字/图片内容算起——卡片不等宽、列宽错乱、flex-grow: 1 像没写一样。

必须手动写全三值并用百分比单位：`flex: 1 1 0%`

只靠 flex: 1 不行，IE11 不认简写逻辑。你得显式拆开，并确保第三个值是 0%：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

flex: 1 1 0% 是目前最稳妥的写法，IE11、Edge 16–18 都能正确识别
别用 0 或 0px —— IE11 对它们的支持极不稳定，部分版本直接跳过
如果还要兼容 IE10，得补私有前缀：-ms-flex: 1 1 0%，且不能省略任意一项
同时加 min-width: 0，否则含长单词或图片的卡片仍会撑开，破坏等宽效果

父容器高度缺失时，`flex-direction: column` 下 `flex: 1` 彻底失效

在 IE11 中，垂直方向 Flex 容器若没有显式高度（比如只设 height: auto 或没设高度），子项的 flex-grow: 1 就不会触发伸展——它连“剩余空间”都算不出来。这不是 bug，是 IE11 的 flex 计算逻辑缺陷。

解决办法只有两个：给父容器设固定高度（如 height: 400px）或 动态计算高度（JS 读取 viewport 或兄弟元素后设置）
别指望 min-height: 100vh 在 IE11 里可靠，它常被忽略或计算错误
如果必须响应式，优先考虑 JS 补位，而不是强行用 CSS hack

margin: auto 在 IE11 中基本不可用

你可能想用 margin: auto 居中某个 Flex 子项，但在 IE11 里它几乎不工作。IE11 对自动 margin 的支持残缺，尤其在 flex-direction: column 场景下，margin-top: auto 和 margin-bottom: auto 常被完全忽略。

替代方案：用 margin-left: auto; margin-right: auto;（仅对主轴水平有效）
更稳的办法是改用容器级对齐：justify-content: center（主轴）或 align-items: center（交叉轴），但前提是容器有明确尺寸
避免在子项上混用 margin 和 flex 属性——IE11 会把 margin 当作基础尺寸参与 flex-basis 计算，导致宽度溢出

IE11 的 Flex 兼容性问题不在“能不能用”，而在“怎么用才不翻车”。最易被忽略的是：它不报错、不警告，只是静默走错逻辑路径。调试时一定要打开 IE11 开发者工具，直接看「Computed」面板里的 flex-basis 实际值——如果是 auto 或具体像素，说明你的 0% 没生效，得回头检查写法和前缀。