Make items in flexbox occupied by all vertical and horizontal space

Question

Currently, I have elements inside the container, each of which contains an image. I want to distribute them at four corners or a container using flexbox. Images are distributed correctly horizontally, but do not occupy all available space vertically.

Here's what it looks like at the moment:

Here is my markup:

<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> 

And my (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%; } } } 

 div.container { width: 405px; height: 405px; background: rgba(0, 0, 0, 0.1); display: flex; flex-wrap: wrap; justify-content: space-between; } div.container div.photo { width: 180px; height: 180px; overflow: hidden; border-radius: 5px; } div.container div.photo 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> 

Answer 1

Apply align-content: space-between to your flexbox to do this (this assumes you have enough free space for vertical alignment) - see the demo below:

The align-content property changes the behavior of the flex-wrap property. It looks like alignment elements, but instead of aligning flex elements, it aligns flex lines. (Source: 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>