如果使用flex-wrap：wrap，则IE11不会正确计算flex项目宽度。
见http://jsfiddle.net/MartijnR/WRn9r/6/
这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;
}
美国在我的项目中，只有最新版本的受欢迎的浏览器需要得到支持，谢谢，但IE11是其中之一。
解决方法
它似乎是一个错误，当使用flex属性计算大小时，不会考虑框大小。当边框占用2px时，它大于50％，因此只有一个适合一行，所以所有的框都被拉伸到全宽。如果禁用边框并添加2px padding，您可以看到同样的事情。
您可以通过向.Box规则集添加max-width：50％来保持边框的正常工作。否则，您可以使用33.34％和49％之间的flex值。这将使宽度小于50％，包括边框，并且随着元素增长以填充可用空间，它们仍将是Flex容器的50％。一种丑陋的黑客，但它会工作，除非你添加一个组合的边框和大于50％的填充减去你设置的flex值。
或许比直接降低百分比值更好的方法是使用calc()。所有支持现代FlexBox语法的浏览器都支持这一点。您只需要从您要使用的百分比值中减去左，右填充和边距的总和。正如你所做的那样，你并不需要这个盒子大小的属性，所以它可以被删除。在IE中似乎还有一个问题，您不能在flex中使用calc，但可以在flex-based属性中使用它，这是您想要的。
.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); }
