Flexbox

A new way to lay out items

Normally, block elements stack from top to bottom. Flexbox lets you place items in a row (or a column) and control their space. You turn it on for a container, and its direct children become flex items.

.toolbar {
  display: flex;
}

When you add display: flex, the items sit in a row, next to each other.

Two axes

A flex container has two axes:

• The main axis runs in the direction of the items. In a row, it is horizontal.
• The cross axis is at a right angle to it. In a row, it is vertical.

These properties go on the container:

Property	What it does
flex-direction	row (default) or column. It sets the main axis.
gap	Space between the items.
justify-content	Places items along the main axis: flex-start, center, flex-end, space-between.
align-items	Places items along the cross axis: stretch (default), center, flex-start, flex-end.
flex-wrap	wrap lets items move to a new line when there is no room.

Growing items

This property goes on an item, not on the container. flex-grow: 1 lets an item take the free space that is left in the row. If two items have flex-grow: 1, they share the free space equally.

Your turn

The tiles have a blue background. The .row area has a gray background so that you can see how much room the items have.