为什么CSS flex-basis在IE11中的计算方式与众不同-css教程-PHP中文网

flex-basis: auto在IE11中等于塌陷，因其将auto解析为0px，且父容器缺交叉轴约束（如height/min-height）时跳过弹性计算；子项需加min-height: 0并配合-ms-flex全声明。

为什么css flex-basis在ie11中的计算方式与众不同

IE11 的 flex-basis 不是“计算不准”，而是压根没按标准走——它把 auto 当 0，百分比常被截断，媒体查询切换后也不重算。

为什么 `flex-basis: auto` 在 IE11 里等于塌陷？

在 flex-direction: column 场景下，flex-basis 控制的是子项高度，但 IE11 直接将 flex-basis: auto 解析为 0px。哪怕内容有高度、写了 min-height，只要父容器没显式交叉轴约束（比如 height 或 min-height），整个弹性计算就跳过，子项直接塌成一条线。

flex: 1 在 IE11 展开为 flex: 1 1 0，不是 0% 或 auto，起点就是 0
父容器必须带可测量的交叉轴尺寸：哪怕只写 min-height: 1px，也能让 IE11 启动 stretch 逻辑
子项必须加 min-height: 0 —— 否则浏览器默认的 min-height: auto 会锁死拉伸

`-ms-flex` 声明顺序和前缀漏写是硬伤

IE10/11 完全不识别标准 flex 属性，只认 -ms-flex，而且对参数顺序极其敏感。漏掉前缀、少一个值、单位写错，整条声明都会被忽略。

必须同时写两套：flex: 0 0 33.33% 和 -ms-flex: 0 0 33.33%，后者不能省
-ms-flex: 1 1 auto 在部分 IE11 版本会失效，改用 -ms-flex: 1 1 0% 或 -ms-flex: 1 1 0px
父容器必须设 display: -ms-flexbox（IE10 必须）或 display: -ms-flex（IE11），否则子项的 -ms-flex 形同虚设

响应式切换时 `flex-basis` 不更新？每个断点都得重写

IE11 不会动态重算已渲染的 flex-basis 值。你在桌面端设了 flex-basis: 50%，切到移动端后，即使媒体查询生效，它仍沿用旧值——这不是缓存，是渲染引擎根本不重走计算流程。

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

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

下载

不能只改 flex-direction 或 flex-wrap，必须在每个断点里重复声明 flex 或 -ms-flex
移动端单列布局要写：@media (max-width: 768px) { .item { flex: none; -ms-flex: none; width: 100%; } }
避免在媒体查询中只写 flex-basis: 100% —— IE11 和旧 Safari 会直接忽略

动画和 JS 动态修改 `flex-basis` 在 IE11 中基本不可行

IE11 完全不支持 flex-basis 的 CSS transition，JS 直接赋值 el.style.flexBasis = '64px' 也常失败，因为会被 flex: 1 等简写覆盖。

不要尝试 transition: flex-basis 0.3s，它在 IE11 里就是立即跳变
JS 控制推荐 class 切换：.sidebar-collapsed { -ms-flex: 0 0 64px; flex: 0 0 64px; width: 64px; }
检测 IE11 可用 document.documentMode，然后改用 width + overflow: hidden 或 transform: scaleX() 降级模拟

真正难的不是写对某一行代码，而是意识到 IE11 的 Flex 引擎根本不在同一套语义体系里——它不解析 auto，不重算断点，不响应过渡，所有“理所当然”的行为都要手动补全。漏掉 min-height: 0 或 display: -ms-flex，整个布局就静默失效，连报错都不会有。