Lesson 1 of 5

Flexbox: align on a line

Flexbox places elements on a line (or column). You turn on flex mode on the container: display: flex.

justify-content spreads the space between children: space-between pushes them to both ends, with the gap in the middle.

.row {
  display: flex;
  justify-content: space-between;
}

🎯 Your goal

A <div class="row"> holds three <span>. In CSS, set .row to display: flex, then space the items with justify-content: space-between.

PRO lesson

This advanced chapter is part of CodeAge PRO. Unlock it to keep your adventure going.