Line things up with Flexbox

Navigation menus, cards lined up in a row, an icon paired with text — “rows” you see all over the web. What lets you build these cleanly is Flexbox. It’s the star of modern CSS layout, and once you learn it here, you can suddenly build pages that look “the part.”

Put display:flex on the parent

First, wrap the things you want to line up in one parent (a <div>, etc.).

<div class="parent">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Then put display: flex; on that parent. To make it clear “this is the parent,” we’ve named the class parent too.

.parent {
  display: flex;
}

That’s all it takes for A, B, and C — which usually stack vertically — to line up in a horizontal row. It’s a member of the display family, right? The idea that “display decides how things line up” starts paying off here.

Words alone are hard to picture, so let’s see it for real. With the same HTML, the arrangement changes completely depending on whether the parent has display: flex;.

Tidy up the gaps and the alignment

Flexbox has handy partners for tidying up the arrangement.

.parent {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

• gap … the gap between parts
• justify-content … alignment along the horizontal axis (center for the middle / space-between to spread to both ends)
• align-items … alignment along the vertical axis (center to align to the middle of the height)

Just learning these three lets you build most of the common arrangements, like “gather in the middle” or “spread out evenly.”

Change the value of justify-content a few ways, and the same three boxes spread out like this.

justify-content also has flex-start (left, the default), flex-end (right), and space-around and space-evenly (spreading the gaps out evenly). You don’t have to memorize them all — start with just the two, “center for the middle, space-between for both ends,” and recall the rest when you need them.

align-items, on the other hand, is in charge of the vertical axis. Line up boxes of different heights and its effect becomes clear. Change the value and the boxes’ top-to-bottom position changes like this.

When they don’t fit, wrap them

Flexbox children shrink and cram together when they don’t fit the parent’s width. When cards get squished and it’s a problem, add flex-wrap: wrap; to the parent. The ones that don’t fit wrap onto the next line.

.cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

It’s also the easiest first-aid for “the row got squished when I looked at it on my phone.”

Words alone are hard to grasp, so let’s compare with and without. The parent’s width is kept the same.

Summary of this lesson

1. display: flex; on the parent of the parts you want to line up
2. gap for the spacing, justify-content for horizontal, align-items for vertical
3. A member of the display family — a tool for “deciding how things line up”
4. When they don’t fit, wrap them with flex-wrap: wrap;