can someone explain to me this flexbox css problem? - html

Question

demo: https://codesandbox.io/s/confident-bash-55v3z
I was following along some tutorial and I encountered this problem. the code is simple
I have flex container called images
<div class='images'>
<img src='imgs/787.jpg' class="main" />
<img src='imgs/sub1.jpg' class="sub1" />
<img src='imgs/sub2.jpg' class="sub2" />
</div>
and for the stylesheet I have
.images {
width: 234px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
border: 1px solid red;
}
.images > * {
padding: 1px;
height: 111px; <--- this seems like a magic number to me
}
img.main {
flex-basis: 99%;
}
img.sub1,
img.sub2 {
flex-basis: 49%;
}
the intended look is like this
However when I commented out the height: 111px;line, the layout is off
I am new to flexbox and css in general and I know that flex-basis is soft of like min-width. Without the height being 111px, the image will grow to occupy more space than its min-width(or flex-basis).
So my question is, to achieve the correct layout we want, how did the original author of the style sheet know that the height needs to be 111px? Can we achieve this layout using 'max-width' or other techniques which would make more sense to me?

Answer 1

First, about the magic number.
You have a container that is 234px wide, and two smaller images that have natural dimensions of 150px by 150px. Their combined width is 300px, which is larger than the container width, so they don't fit in the same row.
We can fix this by making them smaller. But how small do they need to be? There's a 1px padding around each image, for two images that's 4 pixels. We need to subtract that from the container width. Which leaves 234 - 4 = 230 pixels for two images, or 230 / 2 = 115 pixels for each image.
In your example the size of images is controlled using height and flex-basis. Using both at the same time can lead to distorted proportions. This actually happens to the top image in your 'intended look' example. If you compare it to the original image you can see that it's squashed vertically.
Also the interaction of height and flex-basis is quite unintuitive. To achieve the desired layout we don't actually need both, so let's put flex-basis aside.
When you set height of the image without setting its width, the image will automatically scale proportionally. Since our images are square, by setting the height to 111px we implicitly set the width to 111px as well. And since 111 is less than 115 both images fit in the same row. There's nothing magic about the number 111, any number below 115 will work.
We can simplify the code a little:
.images {
width: 234px;
display: flex;
flex-wrap: wrap; /* allow wrapping, otherwise all 3 images would be in the same row */
border: 1px solid red;
}
.images > * {
align-self: flex-start; /* prevent flexbox from stretching items vertically to fill the row */
box-sizing: border-box; /* include padding into the image width */
padding: 1px;
}
img.main {
width: 100%; /* occupy entire row */
}
img.sub1,
img.sub2 {
width: 50%; /* occupy half of the row */
}
Demo: https://codesandbox.io/embed/focused-faraday-bsd88
Try changing the width of the container to 500px or 100px. The images will scale automatically and will keep their proportions.

Answer 2

Instead of flex-basis, try adding width. This will keep 2 images in one line. flex-basis on the other hand, is for initial image size.
img.sub1, img.sub2 {
width: 50%;
padding: 0;
}

Answer 3

You are not setting any width or height to your images, so by default they take their true dimensions. In this case your "sub" images are wider than the width you define to your container, thus, by flex-flow: row wrap; the images can't be on the same line. you should set 50% width to your sub images, or set a bigger width to the container.
I fixed it here