Flexible Layouts Made Easy with CSS Flexbox

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.