meet it

turns a flex row into a column.

Flexbox lines children up in a row unless you say otherwise. flex-direction: column stacks them from top to bottom instead, and keeps every other flex power, like gap.

The direction the children line up in is the . The direction at right angles to it is the . In a row the main axis runs across; in a column it runs downwards.

justify-content always works along the main axis and align-items along the cross axis. So in a column, justify-content moves things up and down, and align-items moves them across.

<div class="panel">
  <h2>Join the club</h2>
  <p>We meet every Friday.</p>
  <a href="https://example.com/join">Join now</a>
</div>

.panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background-color: honeydew;
}

Press show my page to see it here.

Change column to row and the three children line up side by side again.

guess first

A column with `align-items: center`. Where do the buttons go?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<div class="stack">
  <button>Yes</button>
  <button>No</button>
</div>

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

your turn

Your turn. Turn the menu into a column.

Make the menu a flex column, with a gap from 8px to 24px between the dishes.

the page you’re styling

<div class="menu">
  <a href="https://example.com/soup">Tomato soup</a>
  <a href="https://example.com/pasta">Pasta bake</a>
  <a href="https://example.com/cake">Lemon cake</a>
</div>

your css

Your code

Press show my page to see it here.

the menu runs from top to bottomnot checked yet
there is a gap between the dishesnot checked yet

fix it

The words should sit halfway down the box. Fix it!

the page you’re styling

<div class="screen">
  <h2>Loading</h2>
  <p>Nearly there.</p>
</div>

your css

Broken code to fix

Press show my page to see it here.

the box is still a columnnot checked yet
the words sit halfway downnot checked yet

This box is a column. Which way does its main axis run?
In a column the main axis runs downwards, and justify-content works along the main axis.
Change align-items to justify-content, then press run.

nailed it

you turned rows into columns. :D

flex-direction: column stacks flex children from top to bottom.
justify-content follows the main axis, align-items the cross axis.
In a column, the two axes swap directions.

new words in your collection

flex-direction
main axis
cross axis

This lesson isn’t saved. A free account remembers every lesson you finish.

flex-direction turns a flex row into a column.

A column with align-items: center. Where do the buttons go?

Your turn. Turn the menu into a column.

The words should sit halfway down the box. Fix it!

you turned rows into columns. :D

turns a flex row into a column.

A column with `align-items: center`. Where do the buttons go?