css - IE 中的等宽 flexbox 列

Question

我正在构建一个简单的 flexbox 列布局并且必须支持 IE10。我发现 IE 会生成一个包含其内容的 flex 子项，而其他浏览器会保持每个 flexbox 的宽度相等。

我可以通过设置 max-width: 50% 来解决这个问题，但这意味着我们需要基于所需列数的百分比。它适用于两列，但对于三列，我们需要 33.333% 等。

有没有其他方法可以让 IE10/11 保持 flex 宽度相等？

<div class="columns">
  <div class="column">
    <p>hey there this is some long text</p>
  </div>
  <div class="column"></div>
</div>


.columns {
  display: -ms-flexbox;
  -ms-flex-flow: row;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  flex-flow: row;
  width: 100%;
}

.column {
  -ms-flex: 1 0 auto;
  -webkit-flex: 1 0 0;
  flex: 1 0 0;
  min-height: 200px;
  border: 1px solid red;
}

http://jsbin.com/gimifixexo/1/edit?html,css,output

Answer 1

I'm finding that IE will grow a flex child with its contents, while other browsers keep each flexbox at an equal width.

不，这不完全正确，默认情况下，它们都根据其内容调整 flex 元素的大小。

虽然有一个区别，对于大多数浏览器来说， flex 元素的默认 flex 是 flex: 0 1 auto，但对于 IE10 它是 flex: 0 0 自动。

这基本上意味着除了 IE10 之外的所有元素都允许 flex 元素收缩(第二个值表示 flex-shrink)。

因此，要使这项工作正常进行，所需要做的就是 flex: 1 1 0。

但是，为了让 IE 10 和 11 正常运行，我们需要给 flex-basis 一个单位，0px，而 IE10可能还需要 width: 100%，但在我运行我的模拟程序时可以肯定地说。

对于简短的 flex: 1，IE11 通常会自动将其 flex-basis 设置为一个单位，但对于 IE10 可能不会，而且我'我不完全确定前缀属性是否没有错误，并且由于我无法正确测试它没有使用旧浏览器的设备，因此使用完整的简写 *-flex会更安全。

堆栈片段

.columns {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /*  "flex-flow: row" is default, and so is "width: 100%"
  -ms-flex-flow: row;
  -webkit-flex-flow: row;
  flex-flow: row;
  width: 100%;*/
}

.column {
  -ms-flex: 1 1 0px;                  /*  IE10 fix  */
  -webkit-flex: 1 1 0;                /*  changed  */
  flex: 1;                            /*  changed  */
  min-height: 70px;
  border: 1px solid red;
  width: 100%;                        /*  IE10 might need this  */
}

<div class="columns">
  <div class="column">
    <p>hey there this is some long text</p>
  </div>
  <div class="column"></div>
</div>

<div class="columns">
  <div class="column">
    <p>hey there this is some long text</p>
  </div>
  <div class="column"></div>
  <div class="column"></div>
</div>

<div class="columns">
  <div class="column">
    <p>hey there this is some long text</p>
  </div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>