CSS Flexbox的 - 如何讓子元素使用剩餘的垂直空間

Question

我有一個彎曲的佈局如下圖所示：

正如我在標題中所描述的，我想實現這樣的結果：

這裏是codepen

我試過設置搜索g flex-direction到column但它不起作用。

flex-direction: column; 
flex-wrap: wrap; 

Answer 1

要獲得與Flexbox的工作，你需要設置flex-direction: column;和max-height所以你逼新列。

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container { 
 
    padding: 10px; 
 
    max-width: 700px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-content: flex-start; 
 
    align-items: baseline; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
    max-height: 100vh; 
 
} 
 
.card { 
 
    margin-left: 20px; 
 
    margin-bottom: 20px; 
 
    width: 200px; 
 
    background-color: #0ff; 
 
    padding: 20px; 
 
}

<div class="container"> 
 
    <div class="card"> 
 
    1 
 
    <br> 
 
    </div> 
 
    <div class="card"> 
 
    2 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    </div> 
 
    <div class="card"> 
 
    3 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    </div> 
 
    <div class="card"> 
 
    4 
 
    </div> 
 
    <div class="card"> 
 
    5 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    </div> 
 
    <div class="card"> 
 
    6 
 
    <br> 
 
    <br> 
 
    </div> 
 
</div>

您還可以使用CSS列。這是一個很好的參考http://w3bits.com/css-masonry/

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container { 
 
    padding: 10px; 
 
    max-width: 700px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    columns: 2; 
 
} 
 
.card { 
 
    margin-left: 20px; 
 
    margin-bottom: 20px; 
 
    width: 200px; 
 
    background-color: #0ff; 
 
    padding: 20px; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div class="card"> 
 
    1 
 
    <br> 
 
    </div> 
 
    <div class="card"> 
 
    2 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    </div> 
 
    <div class="card"> 
 
    3 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    </div> 
 
    <div class="card"> 
 
    4 
 
    </div> 
 
    <div class="card"> 
 
    5 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    </div> 
 
    <div class="card"> 
 
    6 
 
    <br> 
 
    <br> 
 
    </div> 
 
</div>