Skip to main content

Flexible Layouts Made Easy with CSS Flexbox

October 10, 2015

Flexbox gives you a one‑dimensional layout system that aligns, distributes, and reorders items with just a few lines of CSS.
By late 2015 most evergreen browsers shipped full Flexbox support, replacing many float or table hacks.

Core ideas

  • A flex container establishes a new layout context using display: flex or inline-flex.
  • Items inside can grow, shrink, and wrap automatically along the main axis.
  • Alignment happens along two axes with justify-content and align-items.
  • The order of items is independent of source order via the order property.

Common patterns

1. Perfect centering

.centered {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical   */
  min-height: 100vh;
}

<div class="centered">
  <p>Centered with Flexbox</p>
</div>

2. Responsive navbar

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
}

.navbar ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 600px) {
  .navbar ul {
    flex-direction: column;
    align-items: flex-start;
  }
}

<header class="navbar">
  <strong>Logo</strong>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/">Docs</a></li>
    <li><a href="/">About</a></li>
  </ul>
</header>

The menu shifts from a row to a stacked column on narrow screens without extra markup.

3. Simple equal‑height columns

.columns {
  display: flex;
  gap: 1rem;
}

.columns > article {
  flex: 1;              /* same width */
  background: #fafafa;
  padding: 1rem;
}

<section class="columns">
  <article>Left</article>
  <article>Center</article>
  <article>Right</article>
</section>

Each column stretches to the same height because flex items default to align-stretch.

4. Auto‑wrapping card grid

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 200px; /* grow, shrink, base width */
  background: #fff;
  border: 1px solid #ddd;
  padding: 1rem;
}

<div class="grid">
  <div class="card">Card</div>
  <div class="card">Card</div>
  <div class="card">Card</div>
  <!-- more cards -->
</div>

flex-wrap: wrap lets items flow to a new line once they hit the minimum 200px size, ideal for gallery or dashboard layouts.

Tips

  • Use gap to add consistent spacing between items; fallback with margins for very old browsers.
  • Keep flex: 1 shorthand as flex: grow shrink basis (auto for basis by default).
  • Provide a graceful fallback (display: block) for IE9 and below.
  • For complex grids, combine Flexbox with media queries or move to CSS Grid once support is stable.

Flexbox removes many layout headaches, bringing concise, predictable rules to everyday UI patterns.

Recent posts

Tags