Flexbox: The Basics

Flexbox is arranging furniture along a wall. You pick the wall, then decide how the pieces share the space.

If you asked web developers from fifteen years ago about their biggest headache, a lot of them would say: "putting three boxes side by side and vertically centering something." It sounds trivial. It was not. People used tables, floats, and all sorts of fragile hacks to pull it off, and every one of them broke in some edge case.

Then flexbox arrived. And the thing that used to take an afternoon of trial and error now takes three lines. If you've been getting frustrated with boxes that won't sit where you want, this is the lesson where that starts to change.

Turning it on

.row {
	display: flex;
}

That's it. The element with display: flex becomes a flex container, and its direct children become flex items. Instantly, instead of stacking like shelves, the children line up in a row.

Notice the word "direct." Flexbox only arranges the container's children, not its grandchildren. Remember the family tree from Nesting and the DOM? If something inside an item isn't lining up, it's probably a grandchild, and needs its own flex container.

Furniture along a wall

Here's the picture to keep in your head. You're arranging furniture in a room. You've got a sofa, a side table, and a bookshelf, and you're placing them along one wall.

Two decisions matter:

1. Along the wall: how do the pieces share the space from one end of the wall to the other? Bunched up at one end? Spread out evenly? Centered?
2. Out from the wall: a tall bookshelf and a short side table. Do they line up by their backs against the wall? By their fronts? Does the short one stretch to match?

Flexbox calls these two directions the axes:

• The main axis runs along the wall. By default, left to right.
• The cross axis runs out from the wall, at a right angle to it. By default, top to bottom.

Every flexbox property works on one axis or the other. Keep that straight and flexbox makes sense. Mix them up (and everyone does at first) and it feels like the properties are doing random things.

justify-content: spacing along the wall

.row {
	display: flex;
	justify-content: space-between;
}

justify-content controls the main axis, how the pieces share the space along the wall:

• flex-start (default): everything pushed to the start, like furniture shoved against the left end.
• flex-end: pushed to the end.
• center: bunched together in the middle.
• space-between: first piece at one end, last piece at the other, equal gaps between.
• space-around: equal space around each piece, so the ends get half-size gaps.
• space-evenly: perfectly equal gaps everywhere, including the ends.

align-items: lining up out from the wall

.row {
	display: flex;
	align-items: center;
}

align-items controls the cross axis, how items of different heights line up:

• stretch (default): every item stretches to match the tallest one. That's why flex items in a row often end up equal height, which is secretly one of flexbox's best features.
• flex-start: lined up along the top.
• flex-end: lined up along the bottom.
• center: centered on the cross axis. This is the famous "vertical centering" that used to be so hard.
• baseline: lined up along the baseline of their first line of text, the invisible line the letters sit on. Lovely when items have different font sizes.

gap: walking space

.row {
	display: flex;
	gap: 1rem;
}

You don't jam furniture right up against each other. You leave walking space. gap puts consistent space between items, but not on the outside edges. Much cleaner than adding margins to every item and then removing the margin on the last one.

flex-direction: choosing the wall

.column {
	display: flex;
	flex-direction: column;
}

Here's the twist that confuses everyone at first. flex-direction picks which wall you're lining furniture up against, and that swaps the axes:

• row (default): the main axis runs left to right.
• column: the main axis runs top to bottom.

So in a column, justify-content now controls vertical spacing, and align-items controls horizontal alignment. The properties didn't change their jobs. The wall rotated. "Along the wall" is now up and down.

If you ever set justify-content: center and something centers the "wrong" way, check the flex-direction. That's nearly always it.

The perfect center

Here it is, the three lines that ended fifteen years of suffering:

.center-me {
	display: flex;
	justify-content: center;
	align-items: center;
}

Center along the wall, center out from the wall. Whatever's inside sits dead center, no matter its size.

A word about visual order

Flexbox has properties like order and flex-direction: row-reverse that change the visual order of items without changing the HTML. Use them carefully. As you learned in Accessibility Basics, keyboard focus and screen readers follow the HTML order. If the screen shows A, B, C but the Tab key goes C, B, A, you've built a confusing page. When order matters, change the HTML.

Try it

CSS

Preview

Try it yourself

Work through these one at a time, and predict the result before you press Run:

1. Set justify-content to center, then space-between, then space-evenly.
2. Set align-items to flex-start, then center, then flex-end. Notice the items stop stretching.
3. Add flex-direction: column;. Now try justify-content: center again. Which way does it center now?
4. Center all three pieces in the exact middle of the room.

Check your understanding

In a default flex row, which property spaces items horizontally along the row?

align-items

justify-content

flex-direction

text-align

After setting flex-direction: column, what does justify-content control?

Horizontal spacing

Vertical spacing

Font size

Nothing, it stops working

Which elements does display: flex arrange?

Every element inside the container, at any depth

Only the container itself

Only the direct children of the container

Only images

Up next

You can line things up. Next, you'll learn how items share space (who grows, who shrinks) and build real components with it: a navigation bar, a card row, a footer that stays at the bottom. That's Flexbox in Practice. If you'd like to see flexbox's two-dimensional big sibling, CSS Grid: The Basics is a couple of lessons away.