IE11中的multiline-flexbox错误地计算宽度？

一尘不染

IE11中的multiline-flexbox错误地计算宽度？

css

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

4个盒子每个都有flex-basis：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就是其中之一。

阅读 371

2020-05-16

共1个答案

一尘不染

box-sizing使用该flex属性计算尺寸时，似乎没有考虑到错误。当边框占据2px时，它大于50％，因此一条直线上只能容纳一个，因此所有框都将拉伸到整个宽度。如果禁用边框并添加2px填充，则会看到相同的情况。

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

也许比直接降低百分比值更好的方法是使用calc()。所有支持现代Flexbox语法的浏览器都支持此功能。您只需要从要使用的百分比值中减去左右边距和边距的总和即可。在执行此操作时，您实际上并不需要box-
sizing属性，因此可以将其删除。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);
}

2020-05-16