flex-direction: row, column, and the axis swap

Every example so far pointed one way

The last course built a navbar and a centered modal, but every example kept the main axis in its default direction: horizontal, left to right. That default was only a starting point. flex-direction is the property that turns it.

.row {
  display: flex;
  flex-direction: row; /* the default, stated explicitly */
}

The four values

row (default)
→  [1][2][3]

row-reverse
→  [3][2][1]

column
↓  [1]
   [2]
   [3]

column-reverse
↓  [3]
   [2]
   [1]

row lays items left to right, and row-reverse flips that to right to left. column stacks them top to bottom, and column-reverse flips that to bottom to top. display: flex itself doesn't change. Items are still flex items and gap still spaces them; they just follow a different line.

The axis definitions move with the direction

Here's the detail this lesson is built around, and it's easy to get backwards. The main axis always points where flex-direction points, and the cross axis is always perpendicular. Switch to flex-direction: column and the main axis, horizontal in every example of the last course, becomes vertical. The cross axis becomes horizontal.

flex-direction: row                    flex-direction: column
main axis:   horizontal →→→             main axis:   vertical ↓↓↓
cross axis:  vertical ↕                 cross axis:  horizontal ↔

justify-content and align-items didn't change meaning, their direction did

This is the payoff for the last course's "main axis" and "cross axis" vocabulary. justify-content still positions items along the main axis, and align-items still positions them along the cross axis. What changes is which physical direction each axis points.

.column {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* still the main axis: now vertical centering */
  align-items: center;      /* still the cross axis: now horizontal centering */
}

The centering pattern from the last course still works. justify-content: center plus align-items: center centers the group both ways, because both properties were defined by axis, never by "horizontal" and "vertical". If you memorized "justify-content moves things sideways", flex-direction: column will confuse you. The axis-based definition is what makes this lesson consistent with the last course.

When to reach for column

flex-direction: column shows up constantly in mobile-first layouts: a card's elements stacked on a narrow screen, a sidebar's links, a form's fields top to bottom. Block elements already stack under normal flow, as the CSS layouts course showed. column earns its place when you also want flexbox's justify-content, align-items and gap on that vertical stack.

What this course covers

• Lesson 1, flex-direction (row, column and the axis swap): rotating the main axis, and why the alignment properties still mean the same thing (you are here)
• Lesson 2, flex-wrap: what happens when items run out of room on one line
• Lesson 3, align-content: spacing between multiple wrapped lines
• Lesson 4, flex-grow: letting items absorb leftover main-axis space
• Lesson 5, flex-shrink and flex-basis: how items shrink to fit, and their starting size
• Lesson 6, order: reordering items visually, and the accessibility trade-off that comes with it
• Lesson 7, Putting it together: a responsive card row using every property from this course

By the end, you'll control where items sit, which direction they flow, what happens when space runs short and how much leftover space each one claims.