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>