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 ignore calc() functions used in flex shorthand declarations.

Since this bug only affects the flex shorthand declaration in IE 11, an easy workaround (if you only need to support IE 11) is to always specify each flexibility property individually.

source: 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 shorthand 中定义了 flex-grow: 1，因此 flex-basis 不需要是 33.33%。

由于 flex-grow 将消耗在线的免费 space，因此 flex-basis 只需要足够大以执行换行（如果有必要）。

在这种情况下，flex-basis: 26% 有足够的 space 用于页边距、边框、填充等，但永远不够 space 用于第四项。

flex 不支持 IE11 中的 calc

flex doesn't support calc in IE11

css

internet-explorer

calc

flexbox