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.

Lessons in this unit: