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函数。

由于此错误仅影响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-grow: 1速记中定义了flex的情况下，flex-basis不必为33.33％。

由于flex-grow会占用行上的可用空间，因此flex-basis仅需要足够大即可实施换行（必要时）。

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

flex在IE11中不支持calc

1 个答案: