user2036108 user2036108 - 5 days ago 6
HTML Question

Make items in a flexbox take up all vertical and horizontal space

I currently have elements within a container, each of which contains an image. I want to distribute these into the four corners or the container, using flexbox. The images are distributing correctly horizontally, but don't take up all the available space vertically.

Here's what it looks like at the moment: enter image description here

Here's 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%;
}
}
}

Answer

Apply align-content: space-between to your flexbox to do that - see demo below:

The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, 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>

Comments