用flexbox增加物品的高度

Question

有没有办法创建一个没有空格的布局，其中大多数物品的尺寸是相同的，但有些是高度的2倍？我可以做类似的东西我想用下面的CSS：

家长：

display: flex; 
flex-direction: column; 
justify-content: flex-start; 
align-content: flex-start; 
flex-wrap: wrap; 

孩子：

width: 22% 
height: 100px; 

高大的人有height: 200px。它看起来像这样：

这是非常密切的，但问题是，我需要一个左到右的顺序，而不是顶部至底部，所以我不能使用flex-direction: column。如果我做同样的flex-direction: row，这是行不通的：

任何想法？

Answer 1

根据您的总体情况，您可能可以使用order属性。

CSS order属性指定用于在Flex容器中布置Flex项目的顺序。

这里是一个基本的flexbox，在column对齐中有20个flex项目。

编号是垂直的，就像在您的第一张图片中一样。

• 演示1：http://jsfiddle.net/y12kh47f/

---

随着order你可以重新安排布局不改变HTML或flex-direction。

项目按列堆叠，但order属性覆盖了它们的自然位置并将它们重新排列成行，就像在第二张图像中一样。

• 演示2：http://jsfiddle.net/y12kh47f/1/

---

然后，如果你加倍的几个项目的大小，你只需要找出正确的排序数学（因为每一个项目，现在将占用两个空格）。

注意项目之间没有额外的垂直间距。

• 演示3：http://jsfiddle.net/y12kh47f/3/

所有Flex项目默认设置为order: 0。负值是允许的（即order: -3）。