meet it

Move flex children along the row, and up and down.

Once a parent has display: flex, two more properties arrange its children. moves them along the row, from left to right.

justify-content: center bunches them in the middle. space-between pushes the first child to the left edge and the last to the right, with the others spread between. It is a favourite for menus.

works the other way, up and down. When the parent is taller than its children, align-items: center puts them halfway down.

<div class="bar">
  <h1>Bakery</h1>
  <a href="https://example.com/order">Order now</a>
</div>

.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: wheat;
}

Press show my page to see it here.

Try center in place of space-between to see the difference.

guess first

Centred along the row. Where does the word sit?

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

<div class="box">
  <p>Hi</p>
</div>

.box {
  display: flex;
  justify-content: center;
  height: 200px;
  background-color: lightblue;
}

your turn

Your turn. Put the star in the middle.

Put the star right in the middle of the box: centred along the row, and centred up and down.

the page you’re styling

<div class="frame">
  <p>Star!</p>
</div>

your css

Your code

Press show my page to see it here.

the star is centred acrossnot checked yet
the star is centred up and downnot checked yet

fix it

The links should spread to both ends. Fix it!

the page you’re styling

<div class="toolbar">
  <a href="https://example.com/back">Back</a>
  <a href="https://example.com/next">Next</a>
</div>

your css

Broken code to fix

Press show my page to see it here.

the links spread to both endsnot checked yet
the links are centred up and downnot checked yet

Which of the two properties moves things along the row?
space-between spreads things along the row, so it belongs to justify-content.
Swap the two values round, then press run.

nailed it

you lined everything up neatly. :D

justify-content arranges flex children along the row.
align-items lines them up from top to bottom.
Both go on the flex parent.

new words in your collection

justify-content
align-items

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