Stretch flex lines for multi-line : stretch
By default, the flex line is already the size of the flex container
only applies if the flex container allows flex items to wrap. The flex container controls this with the CSS property, and the initial value of that property is nowrap.
nowrap means flex items can’t wrap into a new flex line if there’s not not enough room for them on the existing flex line. They all get forced on a single flex line, and if they overflow that flex line, the get asked to shrink.
We say that if a flex container allows flex items to wrap, then it’s multi-line. It doesn’t matter if there actually are multiple flex lines or not. If the flex container allows wrapping, then it’s considered multi-line.
This can only happen if the flex container allows flex items to wrap with
The other values of are wrap and wrap-reverse. With both of these the flex container will allow its flex items to wrap as needed.
When the flex container doesn’t allow wrapping, the flex line is the same size as the flex container.
When wrapping is allowed, the flex lines are sized based on the size of the flex items in those flex lines.
This stretching changes the hypothetical size of flex lines we calculated before
This is that “later step” we talked about before. We calculated this initial size of flex lines based on the size of flex items. But now, this size of the flex line might change if we do the stretching.
Stretching happens when stretch or normal
This has to be set on the flex container. The initial value is normal, which in Flexbox behaves like stretch.
The flex container’s own size has to be “definite” for the stretching to work
Remember how in Flow layout a paragraph of text gets taller the more text you add to it? This makes the height of the paragraph “indefinite”, because it depends on how much text there is.
So you could have a flex container that is sized in the same way as the paragraph. The bigger your flex items, the bigger the flex lines, and the bigger the flex container.
If you have a flex container that itself is a block-level box in Flow layout (this would happen, for example, if your flex container is a box generated by a main element that’s a child of the body element), then by default that box’s height would be based on the size of its content.
In this case you couldn’t tell the flex lines, or lines of text in a paragraph to stretch, because the size itself already depends on the size of that content.
So the size of this “container box” needs to either be fixed in some way, or it needs to depend on something else than the size of its content.
Examples of when a flex container has a definite size to make the stretching work
Fixed size
Give your flex container a fixed size to make the stretching work. For example, height: 500px. If your flex lines are smaller than that, they’ll stretch.
Grid items
Flex containers that are grid items already have a definite size.
Flex items
Flex containers that are flex items may have a definite size, too (I think).