Summary

In this lesson, we learned to lay out elements with flexbox and found out that:

• The declaration display: flex makes an element a flex container, and its children become flex items.
• Flex items are placed one after another along the main axis. The cross axis is at a right angle to it.
• flex-direction sets the direction of the main axis: row (a row, the default), column (a column), row-reverse or column-reverse.
• justify-content spreads the items along the main axis: flex-start (what you get by default), center, flex-end, space-between, space-around or space-evenly.
• align-items places the items on the cross axis: stretch (what you get by default), flex-start, center or flex-end.
• To center something both ways, give its parent display: flex, justify-content: center and align-items: center.
• gap sets the gaps between flex items: only between them, never at the edges.
• Flex items stay on one line, and when they don't fit, they shrink. With flex-wrap: wrap, they move to the next line instead.
• flex-grow on a flex item says how much of the free space it gets. flex: 1 makes an item grow too, but from a starting size of zero, not from its width.

Flexbox lays items out in one direction: in a row or in a column. In the next lesson, CSS Grid, you'll learn to lay out elements in rows and columns at once.