Layout with flexbox

8 min 20 XP + 10 for no hints

By default, block elements stack on top of each other. display: flex on a container lines its children up in a row instead.

gap adds space between the children. justify-content decides where they sit along the row: center, space-between and more.

Example

<style>
  nav { display: flex; gap: 16px; justify-content: space-between; }
</style>
<nav>
  <a href="#">Home</a>
  <a href="#">Shop</a>
  <a href="#">Contact</a>
</nav>

Flexbox properties go on the parent (.row), not on the children.

Your tasks

0 of 3 done

Make .row a flex container
Add space between the boxes with gap
Center the boxes with justify-content

Quick check

Where does display: flex go?

row.htmlUpdates as you type

<style>
  .row {

  }
  .box {
    background: #ffe28a;
    padding: 20px;
  }
</style>

<div class="row">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
</div>

Layout with flexbox

Your tasks

Tutor

Quick check