CSS Flexbox: Common Layout Patterns

Once you know the core flexbox properties, the fastest way to get comfortable is seeing them combined to solve the layout problems you'll actually run into. These three patterns — a navbar, a row of equal-height cards, and centering an element — cover a huge share of everyday CSS layout work.

Pattern 1: Navbar with Logo Left, Links Right

<nav class="navbar">
  <div class="logo">MySite</div>
  <ul class="links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

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

.links {
  display: flex;
  gap: 20px;
  list-style: none;
}

The outer navbar uses space-between to push the logo and the links list to opposite ends, while align-items: center keeps them vertically aligned even if the logo and the links have different heights. The inner .links is itself a separate flex container, using gap to space the individual links evenly without needing margins on each <li>.

Pattern 2: Equal-Height Cards in a Row

<div class="cards">
  <div class="card">Short card</div>
  <div class="card">This card has a lot more text in it, spanning several lines</div>
  <div class="card">Medium card</div>
</div>

.cards {
  display: flex;
  gap: 16px;
  align-items: stretch; /* the default, shown explicitly for clarity */
}

.card {
  flex: 1;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

Even though the middle card has far more content, all three cards render at exactly the same height — align-items: stretch (flexbox's default behavior) automatically stretches every card to match the tallest one in the row, which is something that's surprisingly fiddly to achieve without flexbox. flex: 1 on each card also makes them share the row's width equally.

Pattern 3: Centering an Element Both Ways

.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
}

This is the standard pattern for a modal dialog overlay: the overlay covers the full screen (position: fixed; inset: 0;), and the flex centering properties place the modal box dead-center both horizontally and vertically, regardless of the modal's own size or the viewport's dimensions. For layouts needing alignment in two dimensions at once rather than one, it's also worth comparing this against when CSS Grid is the better tool.

---