flex在IE11中不支持calc

Question

我正在尝试使用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。

Answer 1

这是一个已知的错误。

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

由于此错误仅影响flexIE 11中的速记声明，因此一个简单的解决方法（如果仅需要支持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-grow: 1中定义的flex简写，也没有必要flex-basis为33.33％。

由于flex-grow将消耗线路上的可用空间，因此flex-basis只需要足够大即可执行换行（应该这样做）。

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