Question

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

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

还有其他方法可以让IE10 / 11保持柔性宽度相等吗？

<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

我发现IE会用它的内容成长一个flex孩子，而其他浏览器使每个flexbox保持相等的宽度。

不，这不完全正确，默认情况下，它们都会根据其内容调整弹性项目的大小。

但是有一点不同，对于大多数浏览器来说，flex项目的默认 flex 是flex: 0 1 auto，但对于IE10，它是flex: 0 0 auto。

这基本上意味着除IE10之外的所有内容都允许flex项目缩小（第二个值代表 flex-shrink ）。

为了完成这项工作，所需要的只是flex: 1 1 0。

但是，为了使IE 10和11表现出来，我们需要给 flex-basis 一个单位，0px，IE10也可能需要width: 100%，虽然可以肯定地说我操作我的模仿。

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

Stack snippet

.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>

Answer 2

现在，flex是IE10 / 11的一个主要问题。它有一些主要问题可以解决。我没有可以测试的环境，但下面的链接应该为您提供解决问题所需的资源。

http://caniuse.com/#search=flex

注意“已知问题”页面，这只是一个注释。即使CanIUse将flex列表为IE11工作，我也可以确认它的许多元素也被破坏了。

另外，您知道，如果您想使用列并且有一个奇数，例如3.使用33％将完全正常工作。除此之外，只需使用

justify-content: space-between

或者

justify-content: space-around;

这将使列似乎通过适当地间隔它们均匀分布。这里有关于辩护内容的更多信息。 https://css-tricks.com/almanac/properties/j/justify-content/

IE中的等宽flexbox列

2 个答案: