Flexbox 网格 - IE 过早换行答案

【问题标题】：Flexbox grid - IE wraps too earlyFlexbox 网格 - IE 过早换行
【发布时间】：2015-05-30 10:47:05
【问题描述】：

在 flexbox 网格上工作时遇到了一个问题，即 IE 会过早换行。

flex: 0 1 33.33333%

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

【问题讨论】：

【解决方案1】：

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

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

有没有我遗漏的陷阱？如果没有，我希望它被证明是有用的！ :)

【讨论】：

似乎是一个 IE 错误，box-sizing:border-box 和 flex-basis 之间有交互。 Codepen 更清楚地展示了这个错误：codepen.io/anon/pen/azMzWK

【解决方案2】：

您遇到了一个 IE 错误——在解释 flex-basis 值时，IE 似乎没有考虑到 box-sizing。但是，当您添加一个抽象层并使用flex-basis: auto 拉入width: [whatever] 时，它们确实是正确的。

所以，我建议只替换这种样式：

flex: 0 1 33.33333%;

采用这种风格：

flex: 0 1 auto;
width: 33.333333%;

这个更新后的样式在含义上等同于您的旧样式（对于水平 flex 容器中的 flex 项），它可以解决这个 IE 错误，所以它应该可以解决问题。

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

【讨论】：