webdev.complete
📏 Flexbox
🎨CSS Power
Lesson 13 of 117
30 min

Flexbox in 15 Minutes

Axes, justify, align, gap, wrap. Build a navbar.

Before flexbox we used float: left and clear: both and tables and weird negative-margin hacks and we cried about it. Flexbox was the apology. One line, display: flex, and suddenly children behave like adults: spaced, aligned, equal in height, willing to share. This lesson teaches you the five properties that cover 95% of real layouts.

The mental model: a row of boxes on a track

When you set display: flex on an element, it becomes a flex container. Its direct children become flex items. They line up along a track called the main axis. The axis perpendicular to that is the cross axis.

By default the main axis is horizontal, like reading English. Change that with flex-direction and the entire mental model rotates.

  • flex-direction: row is the default. Main axis goes left-to-right.
  • flex-direction: column turns the main axis vertical. The cross axis is now horizontal.
  • row-reverse and column-reverse exist too, but they flip reading order and can confuse screen readers. Use sparingly.
The axis-swap trick
Every flexbox bug eventually traces back to forgetting which axis is which. When you set flex-direction: column, justify-content now controls vertical alignment and align-items controls horizontal. They swap.

The five properties you'll use every day

  • display: flex turns the container on.
  • flex-direction picks your main axis.
  • justify-content distributes items along the main axis.
  • align-items aligns items on the cross axis.
  • gap sets space between items. Replaces margin hacks.

The values for justify-content sound abstract until you see them:

  • flex-start: pile to the start.
  • flex-end: pile to the end.
  • center: cluster in the middle.
  • space-between: first item glued to start, last to end, rest spaced evenly.
  • space-around: equal space around each item (edges get half).
  • space-evenly: truly equal space everywhere, edges included.

Play with the axis

Flip flex-direction and justify-content and watch the boxes scramble. This is the entire core of flexbox in one widget.

Flex axis & distribution
A
B
C
D
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

align-items vs justify-content (the eternal confusion)

Memorize this one sentence and you will never confuse them again: justify is for the main axis, align is for the cross axis."Justify" like text justification, which moves things along the reading direction.

The most-Googled CSS question of all time
"How do I center a div?" Three lines, no tears.
css
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

gap killed margin hacks

Before gap, spacing between flex children meant margin-right on all-but-the-last, or the dreaded > * + * sibling selector. Now you just say gap: 16px and move on with your life. It works in every evergreen browser since 2021.

flex-wrap: when items overflow

By default flex items try to fit on one line, shrinking if they have to. Set flex-wrap: wrap and they will spill onto new lines instead. This is the foundation of every responsive card grid you have ever seen.

css
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.cards > * {
  flex: 1 1 240px; /* grow, shrink, basis */
}

That flex: 1 1 240pxshorthand says "try to be 240px wide, but grow to fill leftover space, and shrink if you have to." It is the closest CSS gets to a magic spell.

Build a real navbar

The classic use case: logo on the left, links in the middle (or wherever), button on the right. Tweak this playground until it clicks.

<!doctype html>
<html>
<head><link rel="stylesheet" href="styles.css"></head>
<body>
  <nav class="nav">
    <a class="logo" href="#">Acme</a>
    <ul class="links">
      <li><a href="#">Products</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">Docs</a></li>
    </ul>
    <button class="cta">Sign up</button>
  </nav>

  <section class="hero">
    <h1>Try changing the nav's justify-content</h1>
    <p>Or flip flex-direction to column. Or remove the gap.</p>
  </section>
</body>
</html>
Open on CodeSandboxOpen Sandbox
margin-left: auto is the secret weapon
Inside a flex container, an item with margin-left: auto soaks up all available horizontal space and shoves itself to the right. Combine with siblings to push only one element to the far end.

Quiz

Quiz1 / 4

You set flex-direction: column. Which property now controls vertical alignment?

Recap

  • display: flex turns children into a track of items.
  • Main axis is direction. Cross axis is perpendicular. Change with flex-direction.
  • justify-content spaces the main axis. align-items aligns the cross axis.
  • gap handles spacing between items. No more margin hacks.
  • flex-wrap: wrap lets rows break. flex: 1 1 240px makes them responsive.
  • margin-left: auto on an item is the secret trick to split a row.