Question

如果使用flex-wrap: wrap，IE11似乎无法正确计算弹性项目宽度。

请参阅http://jsfiddle.net/MartijnR/WRn9r/6/

4个盒子每个都有弹性基础：50％所以我们应该得到两行两个盒子，但在IE11中每个盒子得到一行。将边框设置为0时，它可以正常工作。

知道这是一个错误，还是有办法让IE11表现出来（并且仍然使用边框）？

<section>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</section>

section {
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    box-sizing:border-box;
    margin:0;
}
.box {
    border: 1px solid black;
    background: #ccc;
    display: block;
    -ms-flex: 50%;
    -moz-flex: 50%;
    -webkit-flex: 50%;
    flex: 50%;
    box-sizing: border-box;
    margin:0;
}

P.S。在我的项目中，谢天谢地，只需要支持最新版本的流行浏览器，但IE11就是其中之一。

Answer 1

在使用box-sizing属性计算大小时，似乎没有考虑flex的错误。由于边框占用2px，因此它大于50％，因此只有一条适合一条线，所以所有的框都被拉伸到整个宽度。如果禁用边框并添加2px填充，则可以看到同样的事情发生。

通过将max-width: 50%添加到.box规则集，您可以在保持边框的同时使其正常工作。否则，您可以使用介于33.34％和49％之间的弹性值。这将使宽度小于50％（包括边框），并且随着元素增长以填充可用空间，它们仍将是Flex容器的50％。有点丑陋，但除非你添加一个大于50％的组合边框和填充减去你设置的弹性值，否则它会起作用。

或许比直接降低百分比值更好的方法是使用calc()。所有支持现代Flexbox语法的浏览器都支持此功能。您只需要从要使用的百分比值中减去左右填充和边距的总和。当你这样做时，你真的不需要盒子大小的属性，所以它可以被删除。在IE中似乎还有另一个问题，你不能在flex简写中使用calc，但你可以在flex-basis属性中使用它，这是你想要的。

.box {
    border: 1px solid black;
    /* additional styles removed for clarity */

    /* 
    50% - (border-left-width + border-right-width +
           padding-left + padding-right)
    */
    -webkit-flex-basis: calc(50% - 2px);
    flex-basis: calc(50% - 2px);
}

请参阅演示：http://jsfiddle.net/dstorey/78q8m/3/

Answer 2

我在Rob的微软论坛上收到了一个解决方法。见http://social.msdn.microsoft.com/Forums/ie/en-US/8145c1e8-6e51-4213-ace2-2cfa43b1c018/ie-11-flexbox-with-flexwrap-wrap-doesnt-seem-to-calculate-widths-correctly-boxsizing-ignored?forum=iewebdevelopment

设置min-width并更改为flex:auto会使框表现出来，维持其灵活性。

有关解决方法的更高级示例，请参阅http://jsfiddle.net/MartijnR/WRn9r/23/及以下内容：

<section>
    <div class="box fifty">1</div>
    <div class="box twentyfive">2</div>
    <div class="box twentyfive">3</div>
    <div class="box fifty">4</div>
    <div class="box fifty">5</div>
</section>


section {
    display: -moz-webkit-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    box-sizing:border-box;
    margin:0;
}
.box {
    border: 1px solid black;
    background: #ccc;
    display: block;
    box-sizing: border-box;
    margin:0;
    -ms-flex: auto;
    -moz-flex: auto;
    -webkit-flex: auto;
    flex: auto;
}
.fifty {
    min-width: 50%;
}
.twentyfive {
    min-width: 25%;
}

Answer 3

菲利普沃尔顿在这里有一个关于这个错误的优秀摘要：https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box。他提出了两个解决方案，最简单的方法是设置flex-basis: auto并声明width。（不是max-width或min-width。）此解决方案的优势在于，在更改填充或边框宽度时无需调整calc()。

Answer 4

This is clearly an IE bug所以请保留原来的[正确] CSS并附加一个针对IE10 +的黑客攻击：

/* IE10+ flex fix: */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .box {
        flex: 0;
        min-width: 50%;
    }
}

http://jsfiddle.net/stedman/t1y8xp2p/

IE11中的multiline-flexbox计算宽度不正确？

4 个答案: