Flex Direction and Axes

Every Flexbox property refers to one of two axes — the main axis and the cross axis. Understanding these axes is the key to making sense of justify-content, align-items, and every other alignment property. This lesson establishes that mental model and shows how flex-direction controls which direction becomes the main axis.

The two axes

A flex container has two axes:

• Main axis — the direction flex items flow. By default, this runs left to right (a row).
• Cross axis — perpendicular to the main axis. By default, this runs top to bottom.

Every Flexbox alignment property targets one of these two axes:

Property	Axis it controls
justify-content	Main axis
align-items	Cross axis
align-self	Cross axis (individual item)
align-content	Cross axis (multiple rows)

If you change flex-direction, the main axis rotates — and all these properties rotate with it. This is why understanding axes matters before learning alignment.

flex-direction

flex-direction sets which direction the main axis runs:

/* Default — row, left to right */
.site-nav {
  display: flex;
  flex-direction: row;
}

/* Column — top to bottom */
.tour-card {
  display: flex;
  flex-direction: column;
}

The four values:

Value	Main axis direction	Items flow
row	Left → right	Horizontally (default)
row-reverse	Right → left	Horizontally, reversed
column	Top → bottom	Vertically
column-reverse	Bottom → top	Vertically, reversed

row — the default

With flex-direction: row, items flow left to right. The main axis is horizontal:

.site-nav {
  display: flex;
  flex-direction: row; /* same as not writing it — this is the default */
}

[Home]  [Tours]  [About]  [Contact]
←————————— main axis ——————————→
↕ cross axis

justify-content controls spacing along this horizontal axis. align-items controls how items align vertically (cross axis).

column — for vertical flex layouts

With flex-direction: column, items stack top to bottom. The main axis is now vertical:

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

[Image]          ↑
[Title]          | main axis
[Description]    |
[Price]          ↓
←→ cross axis

Now justify-content controls vertical spacing (along the column), and align-items controls horizontal alignment (across the column).

This is the key shift: when you change flex-direction, the axis that justify-content controls also changes.

A practical use for flex-direction: column

Cards often need their content to stack vertically — image on top, title below, description below that, and a button pinned to the bottom regardless of how much description text there is. This requires flex-direction: column on the card:

.tour-card {
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

.tour-card .tour-card-cta {
  margin-top: auto; /* pushes to the bottom of the column */
}

margin-top: auto on a flex item absorbs all available space, pushing the element to the far end of the main axis. In a column layout, that means the button is always at the bottom of the card — regardless of how much text sits above it.

row-reverse and column-reverse

The reverse variants flip the direction items are laid out. This is primarily useful for visual reordering without changing the DOM order (which matters for accessibility and screen readers):

/* Nav links flow right to left */
.site-nav {
  flex-direction: row-reverse;
}

Use reversal deliberately — it changes the visual order but not the tab order, which can confuse keyboard users if overused.

The analogy

Think of flex-direction as choosing whether your train tracks run east-west or north-south. All the trains (flex items) run along those tracks (main axis). The justify-content property controls how the trains are spaced along the tracks. The align-items property controls how tall or wide each train car is perpendicular to the tracks (cross axis).

When you switch from row to column, you’re rotating the entire track system 90 degrees — and every property that references an axis rotates with it.

Exercise

Use flex-direction: column to improve the tour card layout:

1. In style.css, update the tour card to use a column layout:

.tour-card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

2. Add margin-top: auto to the call-to-action element inside the tour card:

.tour-card .tour-card-cta {
  margin-top: auto;
}

3. Open the browser. Cards with longer descriptions should now have the button anchored at the bottom — all cards’ buttons should be at the same vertical position even when the text length varies.

4. In DevTools, toggle flex-direction between row and column on the .tours-grid container and watch the layout change. Notice how the axis labels in the Flexbox inspector rotate when you switch directions.

Recap

• The main axis is the direction flex items flow; the cross axis is perpendicular.
• flex-direction: row (default) — main axis is horizontal. flex-direction: column — main axis is vertical.
• All alignment properties target a specific axis: justify-content targets the main axis, align-items targets the cross axis.
• Switching flex-direction rotates which axis those properties control — the properties themselves do not change meaning, but which direction they affect does.
• margin-top: auto on a flex item in a column absorbs available space and pushes the item to the bottom — useful for pinning buttons to the bottom of variable-height cards.

Lesson 04 covers alignment — justify-content, align-items, and align-self — the properties that control how items are positioned along and across the main axis.