CSS Flexbox: Stop Fighting Your Layouts · 第 3 / 5 节

Lesson 03: Turning the main axis with flex-direction

Lesson objectives:

Say what flex-direction does and name its four values.

Explain why justify-content is not "the horizontal property."

Predict which property moves items vertically once the main axis is a column.

Prerequisites: Lesson 02 (justify-content = main axis, align-items = cross axis) | Previous << 02 | Next 04 >>

The moment "justify-content = horizontal" betrays you

In Lesson 02 you learned justify-content moves items left and right. That is true — until it isn't. The instant you stack items in a column, justify-content starts moving them up and down, and if you memorized it as "the horizontal one," you are now fighting your own layout. The people who never get comfortable with Flexbox are usually the ones who learned the properties by their default direction instead of by their axis. This lesson swaps "horizontal" for the thing that is actually true and never changes.

Explanation

flex-direction sets how flex items are placed in the container — it defines the main axis and the direction items flow¹. It has four values, and the default is row¹:

row (default): main axis runs along the row, left to right — the horizontal you already know.
row-reverse: same axis, but items start from the right.
column: the main axis now runs top to bottom, in the block direction².
column-reverse: same vertical axis, items start from the bottom.

Here is the rule that does not change: justify-content always follows the main axis, and align-items always follows the cross axis. flex-direction decides where the main axis points, so it decides what each of those two properties actually does. Nothing about the properties changes — the axis they are pinned to just rotates.

Read the diagram top-down: flex-direction is the switch. Pick row and the main axis is horizontal, so justify-content is horizontal. Pick column and the main axis is vertical, so the same justify-content is now vertical. The property stayed the same; only the axis it rides rotated ninety degrees.

which property moves it down now

This container is display: flex with flex-direction: column, so the main axis now runs top to bottom. Which property moves the items up and down the container: justify-content or align-items? Type the property name in lowercase.

The stubborn belief is that justify-content means horizontal. When the main axis is vertical, justify-content moves items vertically. Naming the property forces that belief to update.

CSS

.stack {
  display: flex;
  flex-direction: column;
  height: 300px;
  justify-content: center;
}

My prediction

This is also why vertical menus and sidebars are natural in Flexbox: set flex-direction: column and your items stack, then justify-content spaces them vertically and align-items handles their left-right alignment. Same two properties, rotated axis.

Worked example (follow along)

A vertical sidebar nav, evenly spaced top to bottom, each link centered left-to-right:

CSS

.sidebar {
  display: flex;
  flex-direction: column;
  height: 400px;
  justify-content: space-between;
  align-items: center;
}

Trace it with the rule. flex-direction: column makes the main axis vertical. justify-content: space-between acts on the main axis, so it spreads the links vertically — first at the top, last at the bottom, gaps even. align-items: center acts on the cross axis, which is now horizontal, so each link is centered left-to-right. If you had expected justify-content to space them horizontally, the column flip is exactly what would have surprised you.

Your turn (faded example)

You want three buttons stacked vertically and pinned to the bottom of a tall container. Fill in the two lines:

CSS

.actions {
  display: flex;
  flex-direction: ______;    /* stack vertically */
  height: 300px;
  justify-content: ______;   /* push the stack to the bottom */
}

Answer: flex-direction: column (main axis becomes vertical) and justify-content: flex-end (main-end is now the bottom). Because the main axis points down, flex-end means bottom, and justify-content is the property that moves along that axis. Read it as "which axis, which end," and the column flip stops being a trap.

Summary + what's next

flex-direction sets where the main axis points; justify-content follows the main axis and align-items follows the cross axis, no matter which way they point. Trade "horizontal/vertical" for "main/cross" and the column flip stops surprising you. So far every item has taken its natural size. Next we let items share the leftover space — where flex-grow, flex-shrink, and flex-basis come in, and where the biggest myth of all lives: what flex: 1 actually divides up.

MDN: flex-direction — https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-direction ↩ ↩²
MDN: Basic concepts of flexbox — https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts ↩

Exercises

Exercise 1 · Level 1 (warm-up)

In your own file, build a display: flex container with three children and a fixed height. Add justify-content: center and watch it center horizontally. Now add flex-direction: column and reload. Note which way the items and the centering moved.

Done criteria · checked locally

With `row` (default), `justify-content: center` centers the items horizontally.After adding `flex-direction: column`, the items stack and `justify-content: center` now centers them vertically.You can state that `justify-content` did not change meaning — the main axis rotated.

Exercise 2 · Level 2 (advanced)

Predict, before reloading, what align-items: flex-end does in a flex-direction: column container. Then verify.