Flex items get collected into flex lines

Can we grow and shrink the flex items yet?

Almost. You know how big each flex item would like to be. That’s its flex base size.

The flex container can have one or more flex lines with flex items in them.

The growing and shrinking happens separately in each flex line.

So you first need to figure out which flex items go in which flex line.

By default, all flex items are collected into a single flex line.

That’s because the initial value of flex-wrap is nowrap.

This means the flex container doesn’t allow its flex items to wrap into multiple lines.

Instead, they are all collected into a single flex line.

When are multiple lines possible?

When the flex container has flex-wrap: wrap or flex-wrap: wrap-reverse.

The length of the flex line.

The flex line is always the same length as the size of the content box of the flex container. For example, let’s say you have a display: flex flex container with flex-direction: row, and that it’s laid out with Flow layout. If the width of the browser window is 500 pixels, and the flex container’s ancestor boxes are all in Flow layout without any margin, border, or padding, then the width of the flex container will be 500 pixels. That will then be the length of the flex line.

The “outer” flex base size the flex item requested.

As seen in the previous chapter, each flex item uses flex-basis to say how big it would like to be in the main axis. This size is used to check if it will fit on the flex line. Specifically, the “outer” flex base size is used for this, which means you want to use the margin box size of the flex item if the flex item had this flex base size.

The layout order of the flex items.

You’ve seen how this order is determined in the previous chapter. This is the order in which flex items will be collected into flex lines.

Gaps inserted by the flex container

We need to know if the flex container wants to put a gap between flex items. The flex container can set this gap with row-gap or column-gap property, whichever corresponds to the main direction. By default in English the main direction is horizontal, and if we think of flex items as columns of text, that means we’ll want to set the gap between the flex items with column-gap. This can be confusing and often you’ll want to use the gap property shorthand instead.