2026-04-05

Why Flexbox

Flexbox is a 1‑dimensional layout system that makes it easy to align, distribute, and size elements along a single axis. Use it for rows/columns, spacing, centering, wrapping, and common UI patterns like navbars, cards, and sidebars.

  • Container vs items: You apply display: flex to a parent (the container). Its direct children become flex items.
  • Axes: flex-direction defines the main axis (row or column). The cross axis is perpendicular.

The 80/20 Starter

.container {
  display: flex;           /* activate flexbox */
  gap: 1rem;               /* modern spacing */
  flex-wrap: wrap;         /* let items wrap if needed */
}
.item {
  /* grow | shrink | basis */
  flex: 1 1 200px;         /* responsive chunk ~200px min */
}

This single snippet handles many responsive UIs: items grow to fill space, shrink when tight, and wrap as needed.

Most-used Properties

  • On the container:
    • display: flex | inline-flex
    • flex-direction: row | column
    • justify-content: main‑axis alignment (start, center, end, space-between, space-around, space-evenly)
    • align-items: cross‑axis alignment (start, center, end, stretch, baseline)
    • flex-wrap: nowrap | wrap | wrap-reverse
    • gap: <length>
  • On items:
    • flex: <grow> <shrink> <basis> (shorthand)
    • align-self: per-item cross‑axis alignment
    • order: reorders items visually (use sparingly for a11y)

Mental Model: flex-basis, width, grow, shrink

  • flex: 1 means 1 1 0% in modern browsers: it can grow, can shrink, and starts from a 0 base size.
  • If flex-basis: auto, the item’s width/height is used as the base size. Prefer flex-basis for predictable sizing in flex layouts.

Real‑World Examples

1) A navbar with spaced items

<header class='nav'>
  <a class='brand' href='#'>Brand</a>
  <div class='right'>
    <a href='#'>Docs</a>
    <a href='#'>Pricing</a>
    <a href='#'>Blog</a>
    <button class='cta'>Sign in</button>
  </div>
</header>

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}
.right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.cta { padding: 0.5rem 0.75rem; }
  • justify-content: space-between pushes brand left and the right group to the far edge.
  • Nest a flex container for the right cluster; use gap for spacing.

2) Equal‑height cards with footers aligned

<section class='cards'>
  <article class='card'>
    <h3>Card title</h3>
    <p class='content'>Longer content goes here.</p>
    <footer>
      <button>Details</button>
    </footer>
  </article>
  <article class='card'>
    <h3>Another</h3>
    <p class='content'>Short.</p>
    <footer>
      <button>Details</button>
    </footer>
  </article>
</section>

.cards {
  display: flex;
  gap: 1rem;
  align-items: stretch;      /* equal height per row */
}
.card {
  display: flex;
  flex-direction: column;    /* stack title/content/footer */
  flex: 1 1 240px;           /* responsive width with min */
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
}
.card .content { flex: 1; }  /* fill available vertical space */
.card footer { margin-top: auto; }
  • align-items: stretch equalizes heights; making .card a column lets the footer stick to the bottom.

3) Responsive grid without CSS Grid

<div class='grid'>
  <div class='cell'>A</div>
  <div class='cell'>B</div>
  <div class='cell'>C</div>
  <div class='cell'>D</div>
  <div class='cell'>E</div>
</div>

.grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.grid > .cell {
  flex: 1 1 200px;       /* min 200px, wrap as needed */
  padding: 1rem;
  background: #f3f4f6;
  border-radius: 0.5rem;
}
  • Each cell wants to be 200px wide; they grow to fill the row and wrap when space runs out.

4) Sidebar + content that actually shrinks

<main class='layout'>
  <aside class='sidebar'>Sidebar</aside>
  <section class='main'>
    <h2>Article</h2>
    <pre><code>Long_code_or_text_that_might_overflow</code></pre>
  </section>
</main>

.layout { display: flex; gap: 1rem; min-height: 50vh; }
.sidebar { flex: 0 0 240px; }
.main { flex: 1 1 auto; min-width: 0; }
  • Critical: min-width: 0 on the flex item lets long content shrink instead of overflowing.

5) Dead‑simple centering

<div class='center'>Centered</div>

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;  /* or 100vh for full screen */
}

Quick Alignment Cheatsheet

  • Horizontal row: display: flex; align-items: center; gap: 1rem;
  • Space between ends: justify-content: space-between;
  • Vertical stack with spacing: display: flex; flex-direction: column; gap: 0.75rem;
  • Center both axes: align-items: center; justify-content: center;
  • Wrap into rows: flex-wrap: wrap; gap: 1rem;

Gotchas and Pro Tips

  • Prefer flex-basis over width for flex items; with flex-basis: auto, width is used as the base size.
  • Long content overflow? Add min-width: 0 (or min-height: 0 for column layouts) to the flex item.
  • Use gap instead of item margins for cleaner spacing and easier wrap behavior.
  • flex: 1 equals 1 1 0%. If you need a minimum width, use flex: 1 1 200px.
  • Use Grid for true 2D layouts; Flexbox shines for 1D flows and alignment.
  • Debug faster: In browser devtools, enable the Flexbox overlay and inspect computed values for flex-basis, grow, and shrink.

Copy‑Paste Patterns

One-line axis switcher:

.row { display: flex; gap: 1rem; }
.col { display: flex; flex-direction: column; gap: 1rem; }

Sticky footer card:

.card { display: flex; flex-direction: column; }
.card .body { flex: 1; }
.card .footer { margin-top: auto; }

Split pane:

.split { display: flex; gap: 1rem; }
.split > :first-child { flex: 0 0 320px; }
.split > :last-child  { flex: 1 1 auto; min-width: 0; }

Learn More (Excellent Resources)

  • MDN Web Docs: Flexbox Guide — https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
  • CSS-Tricks: A Complete Guide to Flexbox — https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • Flexbox Froggy (interactive game) — https://flexboxfroggy.com/
  • web.dev: Learn Flexbox — https://web.dev/learn/css/flexbox/
  • SmolCSS: Minimal CSS Layout Patterns — https://smolcss.dev/

Try It Now

  • Replace a float or table-based layout in your project with one of the patterns above.
  • Add gap to an existing flex container and delete spacing margins.
  • Inspect your layout in devtools and toggle flex-basis vs width to see the difference.

Flexbox is supported in all modern browsers; use Autoprefixer if you target very old ones. With a few patterns and these gotchas in mind, you can cover most layout needs quickly and predictably.