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

Question

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:

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%;
        }                   
    }
}

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>

kukkuz · Accepted Answer · 2017-08-12T11:38:22.073

9

Apply align-content: space-between to your flexbox to do that (this assumes of course that you have sufficient available space for the vertical alignment)- 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>

edited Aug 12 '17 at 11:38

answered Dec 01 '16 at 14:21

kukkuz

41,512
6
59
95

1

This solution leads the flexmodel into the absurd. The result is a static size. Flex should be there to deal with dynamic variables. For this result, flex is unnecessary. – Jan Franta Aug 12 '17 at 11:18
Upvote show a valid solution. But this is a not a one. Sorry – Jan Franta Aug 12 '17 at 11:25
@JanNahody This is a *valid* one for God's sake!! please read about `align-content` and why its used! – kukkuz Aug 12 '17 at 11:27
Flex has been made to deal with dynamic variables. Your solution provides a valid solution for this. This is not correct, however, since it can not deal with dynamic variables. It is a solution, but NOT a flex solution. This is the reason for my acting. – Jan Franta Aug 12 '17 at 11:31
Add this limitation to your answer and I will up vote it. – Jan Franta Aug 12 '17 at 11:33
@JanNahody *This* answer is about *distributing the vertical space* and `flexbox` does that with `align-content` when there are multiple flex items that wrap, see what I mean? – kukkuz Aug 12 '17 at 11:35
set height to 100% and you will see what I mean. Your suggestion work only on fix sizes. – Jan Franta Aug 12 '17 at 11:39
@JanNahody well, added the *limitation* to the answer - but I guess that's how `flexbox` works... well, now you can revert the down vote I presume... – kukkuz Aug 12 '17 at 11:41
@JanNahody Thanks! – kukkuz Aug 12 '17 at 11:44
I like your attitude. With pleasure – Jan Franta Aug 12 '17 at 11:46
1

@kukkuz seems like you had a pretty hard time in this comments section ! (tough crowd i guess) anyways thanks for your answer ! – Karambit Feb 01 '21 at 18:19

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

1 Answers1

Linked