Rows with Flexbox

Putting boxes in a row

• By default, boxes stack downward. Often you want them side by side.
• Flexbox is the easy way to do that.
• Put display: flex; on the container — the box that holds the others — and its children line up in a row.

Spacing them out

• Once a box is display: flex;, you control how its children spread.
• justify-content: space-between; pushes them apart, with gaps between.
• gap: 12px; adds an even space between every child.

<style>
  .bar { display: flex; justify-content: space-between; }
  .btn { background-color: #6c5; padding: 10px 16px; }
</style>
<div class="bar">
  <span class="btn">Home</span>
  <span class="btn">About</span>
  <span class="btn">Contact</span>
</div>

Common mistakes

• display: flex goes on the container, not on the items.
• justify-content spaces items along the row.

Now you try

• display: flex goes on the container, not the items.
• Turn a box into a row, then spread its children out.