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