如何使用flexbox創建砌體佈局？

我正在嘗試使用flexbox創建砌體佈局，但我無法找到填補空白的方法。如何使用flexbox創建砌體佈局？

我連着下面

代碼筆例如

http://codepen.io/anon/pen/KpgMKX?editors=110

.wrapper { 
    margin: auto; 
    width: 1024px; 
    height: 100%; 
    display: flex; 
    flex-flow: row wrap; 
    align-items: stretch; 
    align-content: stretch; 
}

更新：

請注意，彎曲方向：列不會爲我工作，因爲它打破了順序內容。

來源

2015-05-20 George Yacoub

[Google]（http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox） – hungerstar

我已經看過這個例子，但它使用的是列而不是行的彈性方向。 –

我更新了問題。謝謝。 –

這是我會怎麼做： http://codepen.io/anon/pen/gpwwpX

我做了兩個以上的包裝，一個是左側和環繞兩個包裝一個兩個箱子。就像這樣：

<div class="big-wrapper"> 
<div class="wrapper2"> 
    <div class="box oneTwo"></div> 
    <div class="box oneOne"></div> 
    </div> 
<div class="wrapper"> 
    <div class="box oneOne"></div> 
    <div class="box oneOne"></div> 
    <div class="box twoOne"></div> 
    <div class="box oneTwo"></div> 
    <div class="box threes"></div> 
</div> 
</div>

然後在CSS我只是增加了兩個新的包裝調整它們的寬度了一點，但你可以用那當然玩。

來源

2015-05-20 22:09:22

感謝您的評論，但這種方法不會縮小和使用flexbox的目的。 –

如何使用flexbox創建砌體佈局？

回答

相關問題