多线弹性箱在IE11计算宽度不正确？ [英] multiline-flexbox in IE11 calculating widths incorrectly?

问题描述

如果使用 flex-wrap：wrap ，似乎IE11不会正确计算flex项宽度。

Seems IE11 doesn't calculate flex item widths properly if flex-wrap: wrap is used.

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

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

The 4 boxes each have flex-basis: 50% so we should get two lines of two boxes each, but in IE11 each box gets one line. When setting the border to 0, it works correctly.

任何想法如果这是一个错误，或者如果有办法使IE11行为（仍然使用边框）？

Any idea if this is a bug, or if there is way to make IE11 behave (and still use borders)?

<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;
}

在我的项目中，只有最新版本的流行浏览器需要支持，幸运的是，IE11是其中之一。

P.S. In my project only the last version of popular browsers needs to be supported, thankfully, but IE11 is one of them.

推荐答案

看起来像使用 flex 属性计算大小时未考虑 box-sizing 的错误。由于边框占用2px，它大于50％，因此只有一个适合一条线，所以所有框都拉伸到全宽。

It looks like a bug where box-sizing is not being taken into account when calculating the size using the flex property. As the border takes up 2px, it is larger than 50% and thus only one fits on a line, so all boxes are stretched to the full width. You can see the same thing happening if you disable the border and add 2px padding instead.

您可以通过添加 max-width：50％到 .box 规则集。否则，您可以使用33.34％和49％之间的flex值。这将使得宽度小于50％，包括边框，并且随着元素增长以填充可用空间，它们仍然是flex容器的50％。一种丑陋的黑客，但它会工作，除非你添加一个组合边框和padding大于50％减去你设置的flex值。

You can make it work correctly while keeping the borders by adding max-width: 50% to the .box ruleset. Otherwise you can use a flex value between 33.34% and 49%. This will make the width less than 50% including the border, and as the elements grow to fill available space, they’ll still be 50% of the flex container. Kind of a ugly hack, but it will work unless you add a combined border and padding larger than 50% minus the flex value you set.

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

Perhaps a better way than decreasing the percentage value directly is to use calc(). This is supported by all browsers that support the modern Flexbox syntax. You just need to subtract the combined total of the left and right paddings and margins from the percentage value you want to use. As you‘re doing this you don’t really need the box-sizing property so it can be removed. There seems to be another issue in IE where you can’t use calc in the flex shorthand but you can use it in the flex-basis property, which is the one you want.

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

这篇关于多线弹性箱在IE11计算宽度不正确？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！