用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）。