Get hypothetical cross size of flex lines
We call this size hypothetical because flex line might get stretched later.
We never see this when the browser renders a page. But in the process of calculating the size and position of all the boxes and text runs, the browser sometimes needs to take some initial or intermediate measurements. These measurements might turn out to be final measurements, or something can change them later in the layout process.
This is the case here. We first get the an initial hypothetical size of all the flex items. Then we get an initial hypothetical size of all the flex lines based on that. But because flex lines and flex items can get stretched later under certain conditions, we call them hypothetical for the time being.
This concept of hypothetical doesn’t exist when layout is done and the page is renderd.
If the flex container doesn’t allow flex items to wrap (: nowrap), then it only has one flex line the size of the flex container.
A single-line flex container only has one flex line, and that flex line is always the exact same size as the flex container. So basically nothing happens in this step in that case.
It’s basically a size that can fit all the flex items.
If you have three flex items, two short ones and a tall one, then the flex line will have to be as tall as that tall flex item.
Baseline alignment can make the flex line even bigger.
When your flex items are aligned along the cross axis with a value of baseline, suddenly their alignment is “synced”.
We can no longer make our flex line as big as the biggest flex item, we have to account for this alignment.
The first line of text inside the flex item is used for this alignment.
For example, imagine you have a flex item with a single word of text, and a huge line height. This flex item is overall small, but there’s lots of space “above” the baseline because of the line height. Then you have another flex item with lots of text, but just regular line height. It doesn’t have this space above the baseline, but it has all this text below the baseline. When these flex items are baseline-aligned, they will all sit on this baseline. Then the flex line will have to be tall enough to fit the first flex item’s space above the baseline, and the second flex item’s space below the baseline.