Lesson 01: The one line that lines things up

Lesson objectives:

• Say what display: flex does to a container and its children.
• Identify which elements become flex items (and which do not).
• Predict that flex items sit in a row along the main axis by default.

Prerequisites: you can write a <div> with a class and set a CSS property | Next 02 >>

Before Flexbox, boxes just stack. Why?

Drop three <div>s on a page and they stack vertically, each on its own line. That is normal block layout, and for years the only ways to put them side by side were floats and inline-block hacks that leaked spacing bugs everywhere. If Flexbox feels like a pile of properties you paste and pray over, it is usually because nobody showed you the very first thing it does — the thing every other property depends on. This lesson is only that first thing: one declaration that turns a stack into a row. Get this, and the rest of the course is just "which direction, which axis."

Explanation

Here is the whole trick to starting. You pick the container — the element that wraps the boxes — and set one property on it: display: flex. The direct children of that container become flex items¹. That is the entire on-switch.

The moment you do this, the children stop stacking and line up in a row, left to right. They are now arranged along the container's main axis, which by default runs horizontally¹. You did not touch the children at all — you changed the parent, and the parent now lays its children out as a flex line.

One detail that trips people up: only direct children become flex items. If a card sits inside your flex container and that card has a heading and a paragraph inside it, the card is a flex item, but the heading and paragraph are not — they belong to the card, one level too deep for this container to arrange².

The editor below is real. The three boxes are stacking. Add the one declaration that turns .row into a flex container.

When the status dot flips to done, the boxes are on the main axis. Notice you only added display: flex to .row — you did not set a width, a float, or anything on the boxes. That is the shift this course is built on: you arrange children by configuring their parent.

Worked example (follow along)

Say you have a header with a logo and a nav, and they are stacking:

Step by step, here is why this works. .bar is the container, so it is the element that gets display: flex. Its direct children are .logo and .links — exactly two flex items. With display: flex set, those two items line up along the main axis, which runs horizontally by default, so the logo sits to the left of the nav on the same line. You did not size either child; the flex line placed them.

Your turn (faded example)

You have a toolbar that should show three buttons in a row, but they are stacking. Fill in the one missing line:

Answer: the missing line is display: flex;. The three <button> elements are the direct children of .toolbar, so they become flex items and line up on the main axis. Nothing needs to change on the buttons themselves.

Summary + what's next

display: flex on a container turns its direct children into flex items and lays them out along the main axis, which runs horizontally by default. You arrange children by configuring the parent, and flex reaches exactly one level down. Next we name the two axes — because once there are two directions, one property aligns along each, and that is where justify-content and align-items finally make sense.