Flexbox

So far every element on your page has been stacked on top of each other. But most designs need things side by side: a logo next to a menu, three cards in a row, an icon next to some text. For a long time this was surprisingly hard to do in CSS. Then Flexbox arrived and made it easy.

Flexbox works on a parent element and its direct children. You turn it on by giving the parent display: flex:

That's it. The links now sit in a row. The parent is called the flex container and the children are flex items. Everything else in this lesson is about controlling how those items are laid out.

The easiest way to add space between flex items is gap:

Unlike margins, gap only adds space between items, not before the first one or after the last one. That's almost always what you want.

By default, flex items go in a row. You can change that with flex-direction:

Now the items go top to bottom instead. That might sound like what happened without Flexbox, but you get gap and all the alignment tools that come next.

The direction you pick is called the main axis. The other direction is the cross axis. In a row, the main axis goes left to right and the cross axis goes top to bottom. In a column, it's the other way around. Keep that in mind, because the next two properties depend on it.

Two properties do most of the work:

• justify-content positions items along the main axis
• align-items positions items along the cross axis

With space-between, the first item goes to the start, the last item goes to the end and any others are spread out between them. That's the classic header: logo on the left, menu on the right. align-items: center lines them up vertically in the middle, even if one is taller than the other.

Other useful values for justify-content are flex-start (the default), center and flex-end. For align-items, try flex-start, center and stretch.

Remember how centering used to be hard? With Flexbox, centering something both horizontally and vertically is three lines:

Whatever is inside ends up right in the middle. The min-height is there so the container has some height to center things in.

By default, flex items squeeze onto a single line, even if they get very narrow. To let them wrap onto the next line when there isn't enough room, use flex-wrap:

This is perfect for things like a list of tags or skills, which should just flow onto as many lines as they need.

Sometimes you want an item to take up all the leftover space. Give it flex: 1:

The input stretches to fill the row and the button next to it keeps its natural size.

Flexbox clicks once you've played with it for a while. Flexbox Froggy (flexboxfroggy.com) is a free little game where you move frogs onto lily pads by writing Flexbox CSS. It takes about twenty minutes and it's genuinely fun.