如何使用flexbox進行砌體佈局

我想通過flexbox.Child元素創建砌體佈局，並且該子元素應該按照以下順序出現，並且子元素的高度和寬度也不相同。我正在使用延遲加載。如何使用flexbox進行砌體佈局

1 2 
3 4 
5 6

來源

2017-01-09 sasoft

Make html and css snippet。 – Rahul

如果3比4高，或者如果1高於2，那麼4就不會顯示在2的下方。 – FelipeAls

在搜索「砌體佈局css網頁設計」後（因爲我從未聽過我之前發現了一些事情：砌體佈局是我昨天稱之爲「Pinterest佈局」的東西。謝謝你教我一個新的術語。以前關於flexbox砌體佈局的問題* https://stackoverflow.com/q/28681572/7382273 * https://stackoverflow.com/q/20977390/7382273 – mat

從技術上講這是可能的flex-flow: column-wrap，但你需要知道的容器的高度，這樣的項目可以適當包裝，加上你需要重新排列柔性項目，因爲默認順序是垂直的。

@import url('https://fonts.googleapis.com/css?family=Montserrat'); 
 
html, 
 
body { 
 
    margin: 0; 
 
    font-family: "Montserrat", sans-serif; 
 
    font-size: 16px; 
 
} 
 

 
.container { 
 
    height: 500px; 
 
    width: 200px; 
 
    display: flex; 
 
    padding: 2px; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
} 
 

 
.cell { 
 
    color: white; 
 
    background: #e91e63; 
 
    height: 150px; 
 
    width: 100px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    border: 2px solid white; 
 
    border-radius: 5px; 
 
} 
 

 
.c2 { 
 
    order: 4; 
 
    height: 100px; 
 
} 
 

 
.c3 { 
 
    order: 2; 
 
    height: 100px; 
 
} 
 

 
.c4 { 
 
    order: 5; 
 
    height: 200px; 
 
} 
 

 
.c5 { 
 
    order: 3; 
 
} 
 

 
.c6 { 
 
    order: 6; 
 
    height: 100px; 
 
}

<div class="container"> 
 
    <div class="cell c1">1</div> 
 
    <div class="cell c2">2</div> 
 
    <div class="cell c3">3</div> 
 
    <div class="cell c4">4</div> 
 
    <div class="cell c5">5</div> 
 
    <div class="cell c6">6</div> 
 
</div>

對於這個問題，結束了他人尋找一個只有CSS-砌築的解決方案，我建議由Michael_B（唯一的，目前最完整的）如下回答：

CSS-only masonry layout but with elements ordered horizontally

來源

2017-08-26 19:18:42

如何使用flexbox進行砌體佈局

回答

相關問題