IE11 中的 multiline-flexbox 计算宽度不正确? [英] multiline-flexbox in IE11 calculating widths incorrectly?

问题描述

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

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%，因此一条线上只有一个适合，所以所有的框都被拉伸到全宽.如果您禁用边框并添加 2px 填充，您会看到同样的事情发生.

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%.有点丑陋，但除非您添加组合边框和填充大于 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 中的 multiline-flexbox 计算宽度不正确?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！