If you need to organize items in a single row, on a single column, you might prefer using Flexbox over Grid.

Flexbox is one of the two modern layouts systems, along with CSS Grid.

Flexbox is a one-dimensional layout model.

It will control the layout based on a row or on a column, but not rows/columns together at the same time as Grid does.

The main goal of flexbox is to allow items to fill all the space made available by their container, depending on some rules you set.

A flexbox layout is applied to a container by setting the property display to flex:

.container {
  display: flex;

Once you add this to an element, the content inside the element will be aligned using flexbox.

Once you do so, you can use other flexbox properties to set the layout.

Some of those properties apply to the container.

Some other properties apply to each individual item inside the container.

Apply to containerApply to items inside the container

Lessons this unit:

0: ▶︎ Introduction
1: Align rows or columns
2: Vertical and horizontal alignment
3: Wrap
4: Moving items before / after another one using order
5: Vertical alignment using align-self
6: Grow or shrink an item if necessary
7: DEMO Create a layout using Flexbox