CSSフレキシボックス - 子要素は、私は以下のようなフレックスレイアウトを持って

Question

残りの垂直方向のスペースを使用する方法：

そして私は、私は、この種のを達成しようとしている、タイトルに記載されているように結果：ここでは

は私が設を試してみたcodepen

ですg flex-direction〜columnただし、動作しません。

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

Answer 1

それはフレキシボックスで動作するように取得するには、あなたが新しい列を強制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>