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

Question

似乎如果flex-wrap: wrap使用IE11,则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;
}

PS在我的项目中,谢天谢地,只需要支持最新版本的流行浏览器,但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-正确-boxsizing被忽视？论坛= 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

这显然是一个IE错误,所以留下原始的[正确] 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/