Flexbox网格 - IE包裹得太早了

Question

在一个flexbox网格上工作我遇到了一个问题，那就是IE太早了。

flex: 0 1 33.33333%

在Chrome和Firefox中运行良好，但在IE中只能连续显示两个项目。

Answer 1

您正在尝试IE错误 - 在解释box-sizing值时，IE似乎无法解释flex-basis。但是，当您添加一个抽象层并使用flex-basis: auto来引入width: [whatever]时，它们确实正确。

所以，我建议只更换这种风格：

flex: 0 1 33.33333%;

这种风格：

flex: 0 1 auto;
width: 33.333333%;

Codepen： http://codepen.io/anon/pen/qEvOWq

此更新样式与旧样式（对于水平Flex容器中的flex项目）的含义相同，并且它可以解决此IE错误，因此它应该可以解决问题。

（注意：此IE错误和解决方法目前记录为"entry #7" on Philip Walton's handy flexbugs page。）

Answer 2

flex: 0 1 100%;
max-width: 33.33333%;

是一种解决方法，似乎适用于所有浏览器。在Chrome / FF和IE http://codepen.io/rootman/pen/dPaLJE

中查看此笔

我缺少任何陷阱吗？如果没有，我希望它证明是有用的！ ：）