Flexbox: The Layout Tool You'll Use Every Day

In the last lesson, you learned that block elements stack vertically and inline-block elements can sit side by side but come with quirks like unwanted gaps. Flexbox was created specifically to solve layout problems like these properly, and it has become the single most-used layout tool in modern CSS. If you only deeply learn one layout system from this entire course, make it this one.

Flex Containers And Items

Flexbox works on two levels: a container (the parent) and its flex items (the direct children). You turn any element into a flex container with one line, and immediately all of its direct children start behaving differently.

<div class="nav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</div>

.nav {
  display: flex;
  gap: 12px;
}

That's it. The three links now sit in a row, side by side, with no inline-block quirks, no mystery whitespace gaps, and gap handles the spacing between them cleanly without needing margin tricks. This alone replaces the entire inline-block navigation pattern from the previous lesson.

Justify Content And Align Items

The real power of flexbox comes from its alignment properties. justify-content controls spacing along the main axis (horizontal, by default), and align-items controls alignment along the cross axis (vertical, by default).

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

justify-content: space-between pushes the first item to the far left, the last item to the far right, and spreads any remaining items evenly between them, which is exactly the pattern behind countless real headers: a logo on the left, navigation links on the right. align-items: center vertically centers every item in the row, solving one of the most notoriously annoying pre-flexbox problems: vertical centering. Before flexbox, centering something vertically required awkward hacks; now it's one line.

Common justify-content values worth knowing: flex-start (default, items packed to the start), center (items packed together in the middle), space-between (described above), and space-around (even space on both sides of every item, including the outer edges).

Growing And Shrinking Items

Flex items can also grow and shrink to fill available space, controlled by flex-grow, flex-shrink, and flex-basis, usually combined into the shorthand flex.

<div class="card-row">
  <div class="card">Tony Stark</div>
  <div class="card">Vikesh Singh</div>
  <div class="card">Iron Man</div>
</div>

.card-row {
  display: flex;
  gap: 16px;
}

.card {
  flex: 1;
  background: #f0f0f0;
  padding: 20px;
  text-align: center;
}

flex: 1 on all three cards tells each one to grow equally and share the available space, so you get three equal-width columns automatically, without calculating any percentages yourself. If you wanted one card twice as wide as the others, you'd simply give it flex: 2 while the others keep flex: 1; flexbox calculates the ratio for you.

Wrapping With Flex Wrap

By default, flex items are arranged in a row and will not wrap to a new line even if they run out of space, which can cause items to shrink uncomfortably small or overflow. Adding flex-wrap: wrap allows items to drop onto new lines once they run out of room, which is essential for responsive layouts.

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

.card {
  flex: 1 1 200px;
}

Here, flex: 1 1 200px means: grow if there's extra space, shrink if there's not enough, but try to be around 200px as a starting point. Combined with flex-wrap: wrap, this creates cards that sit in a neat row on wide screens and automatically stack onto multiple rows on narrow screens, with zero media queries needed, which is one of flexbox's most underrated superpowers for simple responsive behaviour.

You can also change the main axis direction entirely with flex-direction: column, which stacks flex items vertically instead of horizontally, and then justify-content and align-items effectively swap their visual meaning (justify now controls vertical spacing, align controls horizontal).

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

A common beginner mistake is forgetting that justify-content and align-items apply to the flex container, not to individual items (though individual items can override their own cross-axis alignment with align-self). Another common mistake is expecting flexbox items to wrap without explicitly adding flex-wrap: wrap, since the default behaviour is no wrapping at all.

A detail worth remembering as you combine flexbox with other lessons: flex items are, by default, still ordinary boxes following the box model from lesson three, so padding, border, and box-sizing all behave exactly as expected inside a flex layout. Flexbox changes how items are arranged and sized relative to each other; it does not replace or override the fundamentals of how each individual box itself is measured.

Practical Tips And Exercise

Practical tip: think of flexbox as ideal for one-dimensional layouts, a single row or a single column of related items, like a navbar, a button group, or a row of cards. When you need both rows and columns to line up together as a true grid, CSS Grid (next lesson) is usually the better tool.

A quick exercise: build a header with a site name on the left and three navigation links on the right, using display: flex and justify-content: space-between, vertically centered with align-items: center. Then build a row of three cards for Vikesh Singh, Tony Stark, and Iron Man using flex: 1 so they share space equally, and add flex-wrap: wrap to see them reflow on a narrow browser window.