将不完整的行放在顶部

Question

我制作了flexbox layout一堆的东西。 的东西就像文本（内联，流动和包装），除了它们均匀扩展以占用线上的所有可用空间。但后来我有了这个：

我希望它看起来像这样：

我该怎么做？调整flex-grow和width会有所帮助，因为我不知道应用哪些方框。 flex-direction: row-reverse会切换内容，但不会切换布局。

Answer 1

我意识到如何通过制作示例图像来实现这一目标。旋转！

http://codepen.io/bjb/pen/ohKnF

如果您将transform: rotate(180deg)应用于flex-container和的东西，则可以在将布局颠倒的同时显示其内容。确实需要更改标记，以便的东西向后放入标记（否则第一个的东西会因为变换而位于底部）。

Answer 2

不要过分依赖浏览器自动计算。

查看我创建的方法：http://jsfiddle.net/AZtY8/

考虑到您没有给margin，padding和border，因为：

• 连续2项，弹性基础为50％ - 34％
• 3项，弹性基础为33％ - 26％
• 4项，弹性基础为25％ - 21％，依此类推

HTML：

<div>
<div class="wide"></div>
<div class="wide"></div>
<div class="wide"></div>

<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div>
</div>

CSS：

body > div {
    background-color: #90a; margin: 4px; padding: 2px;
    display: flex;
    flex-wrap: wrap;
}
body > div > div {
    background-color: #af3; margin: 4px;
    height: 100px;
    flex-grow: 1;
    flex-basis: 20%;
}
body > div > div.wide {
    flex-basis: 30%;
}