flex 不支持 IE11 中的计算

Posted 2023-03-07

【中文标题】flex 不支持 IE11 中的计算

【英文标题】：flex doesn't support calc in IE11

【发布时间】：2019-03-11 03:45:30

【问题描述】：

我正在尝试使用 Flexbox 创建布局。在其中一种布局中，我想要 3 个等宽的列。为此，我使用calc 设置列宽。这在现代浏览器中运行良好，但在 IE 中它当然不想工作。这是我的代码：

.container 
  width:50vw;
  margin:0 auto;
  display:flex;

  .container > div 
    flex:1 0 calc(100% / 3);
  

<div class="container">
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>

正如我所提到的，这在现代浏览器中运行良好，但在 IE 中，列只会相互折叠，除非我使用特定百分比代替 calc。

【参考方案1】：

这是一个已知的错误。

IE 10-11 忽略在flex 速记声明中使用的calc() 函数。

由于此错误仅影响 IE 11 中的 flex 简写声明，一个简单的解决方法（如果您只需要支持 IE 11）是始终单独指定每个灵活性属性。

来源：https://github.com/philipwalton/flexbugs#flexbug-8

所以，换句话说，而不是：

flex: 1 0 calc(100% / 3)

试试：

flex-grow: 1;
flex-shrink: 0;
flex-basis: calc(100% / 3);

---

另外，考虑一下：你甚至不需要calc() 函数。

如果你想要三个等宽的列，可以这样做：

flex: 1

或

flex: 1 0 30%

甚至：

flex: 1 0 26%;

在flex 简写中定义flex-grow: 1 后，flex-basis 无需为 33.33%。

由于flex-grow 将消耗在线上的可用空间，flex-basis 只需大到足以强制执行换行（如果有必要）。

在这种情况下，flex-basis: 26% 有足够的空间用于边距、边框、填充等，但没有足够的空间用于第四个项目。