Flex-direction

Learn the main axis direction with flex-direction.

What is flex-direction?

flex-direction decides which way the container lays out its children. Two core values: row lines them up side by side, left to right; column stacks them top to bottom. The default is row, so when you write display: flex the items line up side by side automatically.

The direction you pick sets the container's main axis.

Main axis and cross axis

Every flex container has two axes: the main axis and the cross axis. When you pick flex-direction: row the main axis is horizontal; with flex-direction: column it is vertical. The cross axis runs perpendicular to it.

Once you choose a direction, the alignment settings from the next lessons work along these axes.

A vertical menu with column

A column container is ideal for vertical menus and card stacks. Make a nav element a flex container and write flex-direction: column; the links stack top to bottom, giving a sidebar look.

For a horizontal menu you would have used row. Same two menus, just one direction declaration apart, look completely different.

Exercise Stack the sidebar vertically

Add a .sidebar class selector and write both display: flex and flex-direction: column inside. The sidebar links will then stack top to bottom.

Show example solution

/* stack the sidebar vertically */
.sidebar {
  display: flex;
  flex-direction: column;
}

Test yourself

What does flex-direction: row do?
```
.menu {
  display: flex;
  flex-direction: row;
}
```
- It stacks items vertically
- It lines items up side by side
- It hides the items
- It centers the items
Show answer

It lines items up side by side — Correct. row lines items up side by side, left to right.

Write the direction value for a vertical menu

nav.menu {
  display: flex;
  flex-direction: ____;
}

Show answer

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

Match the direction values

row

Lines up side by side
column

Stacks top to bottom
flex-direction

Direction declaration

Next lesson: Justify-content

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies