How to display 2 images using the flex property

Let's assume that we are working with the following structure:

html
<div class = 'Box'>
    <img src = 'url_1'></img>
    <img src = 'url_2'></img>
</div>

If we want to fit both images in the container:

terminal

+––––––––––+––––––––––+
|          |          |
|   50%    |    50%   |
|          |          |
+––––––––––+––––––––––+

And the CSS:

CSS
.Box{
    display: flex;
}
.Box img{
    max-width: 50%;
}

If we want to display the images in full-size, we need to apply flex-wrap: wrap to the container:

terminal

+––––––––––—––––––––––+
|                     |
|        100%         |
|                     |
+––––––––––––––––––––—+
|                     |
|        100%         |
|                     |
+––––––––––––––––––––—+

And the CSS:

CSS
.Box{
    display: flex;
    flex-wrap: wrap;
}
.Box img{
    max-width: 100%;
}

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.