GuideLabGlossary

Stretching flex lines with : stretch

After an initial round of sizing flex items and flex lines, the flex container can make the flex lines stretch along the cross axis to fill the flex container box

Imagine you’re writing a novel. You have a blank page, with a paragraph of text on it. The paragraph takes up maybe a third of the height of the page.

A lovely paragraph of text with a bunch of words which takes up about a third of the page

The size of the text is big enough for you to read. But the lines of text are spaced so close to one another that the paragraph is tiring to read.

A lovely paragraph of text with a bunch of words whic takes up about a third of the pageNot a huge fanof this line spacing

You change the paragraph text settings, and double the line spacing. Now, the text is easier to read. There’s more space between each line of text.

A lovely paragraph of text with a bunch of words which takes up about a third of the pageDouble the size of text lines

Now imagine that instead of doubling the line spacing, you instead told your writing app to “stretch the lines of text vertically so that they fill the entire height of the page”.

A lovely paragraph of text with a bunch of words which takes up about a third of the pageStretch text lines to fill the entire page

Before your paragraph was taking up a third of the page, and now it’s taking up the entire height of the page. But you have the same number of lines of text. It’s just these lines of text got super tall, and now there’s lots of spacing between the text of each line.

A lovely paragraph of text with a bunch of words which takes up about a third of the pageA lovely paragraph of text with a bunch of words which takes up about a third of the pageSTILL FIVE LINES OF TEXT

This is basically what : stretch does. But, instead of stretching lines of text, you’re stretching flex lines with flex items in them.

A lovely paragraph of text with a bunch of words which takes up about a third of the page213align-content: stretchStretches flex lines

doesn’t do anything if the flex container is single-line, which is the default.

The flex container is single-line by default because the initial value of the property is nowrap. This means that flex items are not allowed to wrap, and instead are all to be collected in a single flex line.

123flex-wrap: nowrapAll flex items are collected in a single line

A single-line flex container only has a single flex line, and that flex line has the same size as the flex container box. So there’s nothing to align or stretch.

There’s nothing to stretch, because I’m already the same size as the flex containeralign-content: stretch

does do something if the flex container is multi-line.

A flex container is considered multi-line if it allows its flex items to wrap into multiple flex lines. That can be set with : wrap or : wrap-reverse.

123Now we can wrap into new flex lines as neededflex-wrap: wrap

It doesn’t matter if the flex items actually wrap. You could have a flex container with : wrap and a single flex item that doesn’t need to wrap. That flex container is still considered multi-line.

123Still considered a multi-line flex containerflex-wrap: wrap

You’re not stretching the flex items, just the flex lines.

Flex items can be stretched to fill their flex line along the cross axis. In fact, they do by default.

213We don’t stretch, just the flex lines

But that behavior is controlled by another property, align-self and .

21align-self: stretchalign-self: center3