What is the best flexbox wrapper/image configuration? - html

Question

I'm having some difficulty understanding the different image size configurations in Flexbox. It seems like I get a different result every time I try to apply them.
Instead of saying "it all depends on the situation", can someone explain the following with some coherent logic stringing through these different scenarios? I would like to know why the results are different each time. I'm not too concerned about the ratio of the images, but more so about the locations of the images depending on the viewport size. Let's say I use object-fit: cover for all scenarios. Here's an example that puts two images side by side.
index.html
<section>
<figure>
<img src="profile image1.jpg" alt="">
</figure>
<figure>
<img src="profile image2.jpg" alt="">
</figure>
</section>
style.css
section {
display: flex;
}
Scenario 1
style.css
/* figure wrapper's dimension is set, but not those of the images */
figure {
flex: 50%;
width: 100%;
height: auto;
}
Scenario 2
style.css
/* figure wrapper's dimension and the images' dimension are both set with a percentage unit */
figure {
flex: 50%;
width: 100%;
height: auto;
}
img {
width: 100%;
height: 100%;
}
Scenario 3
style.css
/* figure wrapper's dimension and the images' dimension are both set with the pixel unit */
figure {
flex: 50%;
width: 400px;
height: 400px;
}
img {
width: 400px;
height: 400px;
}
Scenario 4
style.css
/* figure's dimension is set with max-width and max-height */
figure {
flex: 50%;
max-width: 400px;
max-height: 400px;
}
img {
width: 100%;
height: 100%;
}
Senario 5
style.css
/* figure's dimension and image's dimension are set with max-width and max-height */
figure {
flex: 50%;
max-width: 400px;
max-height: 400px;
}
img {
max-width: 100%;
max-height: 100%;
}
I guess I'm ultimately trying to figure out what the benefit of putting the image in a container with different configurations of pixel/percentage dimension unit.

Answer 1

Not setting image width (scenario #1), the image will use its
original width and height, meaning if, for example, you are using an image having 1024*768 dimension, it fills 1024 px of your page width and 768px of your page height. This behavior will ignore whatever
the configuration you have used for its wrapper i.e. figure.
Having set the img width 100%, meaning you've forced the element to adhere to the width of its container (in this case figure). So, in this case, the flex configurations come into effect.
In scenario#2 you have set the width of flex item (i.e. figure) to 100% of its container (i.e. section). But it sets the initial width of the figure! meaning unless you haven't set the flex-shrink to 0, the figure will be shrunk to fulfill the specifications of Flexbox.
Flexbox specification says while flex-wrap is nowrap which is the default behavior, the width of the container will be assigned equally to the items. As you have two items here (two figures), the width of each will be shrunk to 50% of its container (i.e. section).
The result is obvious now. The image will be shrunk to 100% of its container which in turn have 50% of its container and you will see two images beside each other.
When you set width: 400px for figure element which in place is a flex item, It's somehow ignored by the browser and is replaced by the browser calculated width. flex-shrink, flex-grow are two of them. When you say flex: 50%, you have not changed flex-grow and flex-shrink default values (i.e. 1) allowing the browser to shrink the items to position them in one line (as flex-wrap: nowrap says to do that!)
As a result, in scenario#3 which the flex-basis is 50%, the specified width will be ignored and the base width of the element will be 50% of its container. But of course, they will be shrunk so that the final width will be something that allows figure items to be beside each other and img tags adhere the width of their container and cover them (will be resized to fill them)
In scenario#4 and #5, you have set the max-width of figure item. Doing such will cut the calculated width of browser meaning it will overwrite everything the browser calculated using the above rules. It does not matter whether you have specified the width using px or percent If the browser calculated width is greater than the specified max-width, the final width will be changed to max-width.

Answer 2

Scenario 1
The images use their natural size. If they are smaller than the flexboxes, they are aligned to the left or their respective flexbox like text, forming two columns. If they are bigger, they overflow. I would therefore advise against this.
flex: 50% is a shorthand for flex-basis: 50%; flex-grow: 1; flex-shrink: 1. The figures have both a flex-basis and a width, which is useless. Only the flex-basis will be considered. Therefore, the algorithm will first create the figures at 50% of the width of their parent, then either grow them or shrink them evenly to fit said parent. As I said before, the images will overflow regardless if they are too big.
Scenario 2
Just like in Scenario 1, the width: 100% on the figure is useless.
Giving the images both a height and width will make them stretch to fill their parent. I do not know the exact algorithm which determines their size in this case because I never do that. I'd recommend only setting width in this case, so the height of the image is automatically chosen to respect the aspect ratio.
Scenario 3
The width and height of 400px on the figure is ignored because flex: 50% set the flex-basis which has priority.
The image is stretched to be exactly 400px by 400px, which might cause it to overflow horizontally.
Scenario 4
The figures are told they cannot grow beyond 400px, so if 50% of their parent is bigger than that, they will be of 400px wide. Being given no set height, and since their children have a relative height of 100%, their height is set to their max-height of 400px. If someone knows a better explanation of this behavior, please share in the comments.
The images are stretched to fill the flexbox entirely, losing their original aspect ratio.
Scenario 5
The figures behave just like in scenario 4.
The images keep their original size EXCEPT if they are wider than their parent figures, in which case they are shrunk down. Since both max-width and max-height are set, the images may lose their original aspect ratio in the process.
Another recommendation
You don't need to make the figures grow at all. This can be desirable if you want to style them and add legends to your images. Example:
section {
display: flex;
}
figure {
background-color: #dca;
padding: 20px;
}
img {
max-width: 100%;
}
<!-- PS: the width and height attributes on img tags emulate actual image size -->
<section>
<figure>
<img width="200" height="100" alt="">
<legend>Fig. 1</legend>
</figure>
<figure>
<img width="400" height="100" alt="">
<legend>Fig. 2</legend>
</figure>
</section>
The default flex-styles for any element are:
flex-grow: 0; /* do not grow */
flex-shrink: 1; /* shrink automatically to fit parent */
flex-basis: auto; /* but otherwise determine size based on content */
Then again, you might want elements to fit into columns neatly, in which case a flex: 50% on a wrapper around the figure elements might be better. In any case, it always helps to add background colors to elements when testing things out!