CSS Flexbox: Layouts That Actually Behave The One Line That Starts Everything
1 / 5
Next
The One Line That Starts Everything ~12min

display: flex

By default, block elements stack on top of each other. The moment you write display: flex on a parent, its direct children line up in a row instead.

That is the whole idea. The parent is the flex container. Its children are flex items. Everything else in Flexbox is a refinement of this one relationship.

The part people miss

You put display: flex on the container, never on the items. A very common bug is styling the boxes when you meant to style the box that holds them.

Tasks
Preview