Flexible Layouts Made Easy with CSS Flexbox

Luiz TanureLuiz Tanure
2 min read

Note: This article was originally published on October 10, 2015. Some information may be outdated.

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.


Originally published at letanure.dev

0
Subscribe to my newsletter

Read articles from Luiz Tanure directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Luiz Tanure
Luiz Tanure