meet it

`display: flex` lines the children up in a row.

A is an element sitting directly inside another one, its parent. Give the parent display: flex and its children stop stacking up. They line up side by side in a row.

This way of laying things out is called . Most menus, toolbars and rows of cards on the web are built with it.

sets the space between the children, like gap: 12px. It only adds a gap between them, never round the outside edges.

<div class="row">
  <div class="tile">Red</div>
  <div class="tile">Amber</div>
  <div class="tile">Green</div>
</div>

.row {
  display: flex;
  gap: 12px;
}
.tile {
  background-color: lightgray;
  padding: 16px;
}

Press show my page to see it here.

Remove display: flex and the tiles stack up again, one under another.

guess first

Flex on the children instead. What happens?

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

<div class="row">
  <div class="tile">Red</div>
  <div class="tile">Amber</div>
  <div class="tile">Green</div>
</div>

.tile {
  display: flex;
  background-color: lightgray;
}

your turn

Your turn. Build a menu bar.

Turn the menu into a flex row and put between 10px and 30px of gap between the links.

the page you’re styling

<div class="menu">
  <a href="https://example.com/home">Home</a>
  <a href="https://example.com/shop">Shop</a>
  <a href="https://example.com/help">Help</a>
</div>

your css

Your code

Press show my page to see it here.

the menu is a flex rownot checked yet
there is a gap between the linksnot checked yet

fix it

The cards still touch. Can you fix it?

the page you’re styling

<div class="cards">
  <div class="card">Cats</div>
  <div class="card">Dogs</div>
</div>

your css

Broken code to fix

Press show my page to see it here.

the cards have a 20px gap between themnot checked yet

The cards sit in a row but touch. Which element are the cards sitting inside?
gap belongs on the parent, the one with display: flex.
Move gap: 20px; into the .cards rule, then press run.

nailed it

you put your boxes side by side. :D

display: flex on a parent lines its children up in a row.
gap adds space between the children.
Flexbox goes on the parent, not on the children.

new words in your collection

child
flexbox
gap

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

display: flex lines the children up in a row.

Flex on the children instead. What happens?

Your turn. Build a menu bar.

The cards still touch. Can you fix it?

you put your boxes side by side. :D

`display: flex` lines the children up in a row.