×

css · level 2 · unit 2 · lesson 1

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

justify-content has more values than center.

You know center and space-between. Unless told otherwise, children bunch at , the start of the main axis. bunches them at the far end instead: the right of a row.

makes every gap equal, including the gaps at both edges. space-around gives each child equal room on both sides, so the edge gaps come out half the size.

All of these share out free space without changing the children's size. If a child has flex-grow, there is no free space left to share.

<div class="actions">
  <button>Cancel</button>
  <button>Save</button>
</div>
.actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px;
  background-color: whitesmoke;
}

Press show my page to see it here.

Try space-evenly, then space-around, and compare the gaps at the edges.