フレックスボックスのメイクアイテムはすべて垂直と水平のスペースを占めます

Question

私は現在、コンテナ内にそれぞれイメージを含む要素を持っています。私はflexboxを使用して、これらを四隅またはコンテナに配布したいと思います。画像は正しく水平に分配されていますが、使用可能なスペースをすべて垂直に占めていません。ここで

は、それが現時点では次のようになります。

は、ここに私のマークアップです：

<div class="container"> 
    <div class="photo"> 
     <img src="https://placehold.it/180"> 
    </div> 
    <div class="photo"> 
     <img src="https://placehold.it/180"> 
    </div> 
    <div class="photo"> 
     <img src="https://placehold.it/180"> 
    </div> 
    <div class="photo"> 
     <img src="https://placehold.it/180"> 
    </div> 
</div> 

そして、私の（S）CSS：

div.container { 
    width: 405px; 
    height: 405px; 
    background: rgba(0,0,0,0.1); 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 

    div.photo { 
     width: 180px; 
     height: 180px; 
     overflow: hidden; 
     border-radius: 5px; 

     img { 
      height: 100%; 
     }     
    } 
} 

Answer 1

は何をするあなたのflexboxにalign-content: space-betweenを適用しますこれはもちろん、これはあなたがが利用可能であることを前提としています。のスペースはです垂直配向） - デモ以下を参照：

ALIGN-コンテンツプロパティはフレックスラップ 性の挙動を変更します。これは、align-itemsと似ていますが、flex アイテムを整列させる代わりに、フレックスラインを整列させます。 （出典：W3schools）

div.container { 
 
    width: 405px; 
 
    height: 405px; 
 
    background: rgba(0, 0, 0, 0.1); 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    align-content: space-between; 
 
} 
 
div.container div.photo { 
 
    width: 180px; 
 
    height: 180px; 
 
    overflow: hidden; 
 
    border-radius: 5px; 
 
} 
 
img { 
 
    height: 100%; 
 
}

<div class="container"> 
 
    <div class="photo"> 
 
    <img src="https://placehold.it/180"> 
 
    </div> 
 
    <div class="photo"> 
 
    <img src="https://placehold.it/180"> 
 
    </div> 
 
    <div class="photo"> 
 
    <img src="https://placehold.it/180"> 
 
    </div> 
 
    <div class="photo"> 
 
    <img src="https://placehold.it/180"> 
 
    </div> 
 
</div>