Real Flexbox Patterns

Holy grail, sticky footer, sidebar layouts, card grids.

Knowing the flexbox properties is one thing. Knowing the half-dozen recipes that ship in real interfaces is another. These are the patterns you will reach for over and over, on every project, until you can write them in your sleep.

Pattern 1: the sticky footer

Footer hugs the bottom of the viewport when content is short, but slides down when content is long. The page never has a sad gap of empty space under a tiny article.

css

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1; }     /* eat all leftover space */
footer { /* sits at the bottom naturally */ }

The trick: make body a vertical flex column at least as tall as the viewport, then tell main to grow into all leftover space. The footer is shoved down because main expanded.

Pattern 2: the holy grail layout

Header on top. Footer on bottom. Sidebar plus main content in the middle. For two decades web devs needed entire blog posts to do this. Now it is about ten lines.

css

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page .middle {
  display: flex;
  flex: 1;
}

.page aside { flex: 0 0 220px; }      /* fixed sidebar */
.page main  { flex: 1; }              /* fills the rest */

Grid does this even better

For two-dimensional layouts like this, CSS Grid is genuinely the cleaner tool. Flexbox can do it, and you will see flexbox versions in the wild, but reach for Grid in new code. We show that in the next chapter.

Pattern 3: the responsive card row that wraps

Three cards in a row on desktop, two on tablet, one on mobile. No media queries. This pattern alone justifies flexbox's existence.

css

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.cards > .card {
  flex: 1 1 260px; /* try to be 260px wide, grow or shrink as space allows */
}

Three cards side by side until the viewport gets narrow enough that 260px is too wide; then they wrap to two columns; then to one. Zero media queries, automatic responsiveness.

Pattern 4: push the last item to the right

The single most-asked Stack Overflow flexbox question. Header with nav links on the left, a profile button on the right. The cleanest solution doesn't use absolute positioning or floats:

css

.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
}

.toolbar .profile {
  margin-left: auto;  /* soaks up all remaining horizontal space */
}

An auto margin inside a flex container behaves like a spring. It expands to fill whatever space is available, pushing whatever follows it to the far edge.

Pattern 5: chip and tag inputs

A row of pills (think Gmail recipients, GitHub topic tags) that wraps when there are too many. Combine flex-wrap with a small gap and you have it.

css

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #eef2ff;
  border-radius: 999px;
  font-size: 14px;
}

Pattern 6: equal-height columns

Three cards side by side, all the same height regardless of content length. Flexbox does this for free. align-items defaults to stretch, which makes every child the height of the tallest sibling. People used to fight tables for years over this. Now you do nothing.

css

.row {
  display: flex;
  gap: 16px;
  /* align-items: stretch is the default. Equal heights, free. */
}

Try a few patterns together

Edit the CSS to break or fix the patterns. The HTML below has a sticky footer, a card row that wraps, and a toolbar with a pushed-right item, all in one demo.

<!doctype html>
<html>
<head><link rel="stylesheet" href="styles.css"></head>
<body>
  <header class="toolbar">
    <strong>FlexShop</strong>
    <a href="#">Catalog</a>
    <a href="#">About</a>
    <button class="profile">Sign in</button>
  </header>

  <main>
    <h1>Featured</h1>
    <div class="cards">
      <article class="card">
        <h3>Mini Cactus</h3>
        <p>Small. Spiky. Survives anything.</p>
      </article>
      <article class="card">
        <h3>Desk Lamp</h3>
        <p>Three brightness levels and a USB port for charging.</p>
      </article>
      <article class="card">
        <h3>Coffee Beans</h3>
        <p>Single origin. Roasted Tuesday.</p>
      </article>
      <article class="card">
        <h3>Notebook</h3>
        <p>Dotted pages. Lays flat. The good kind of stationery.</p>
      </article>
    </div>

    <h2>Tags</h2>
    <div class="chips">
      <span class="chip">javascript</span>
      <span class="chip">flexbox</span>
      <span class="chip">layout</span>
      <span class="chip">responsive</span>
      <span class="chip">grid</span>
      <span class="chip">accessibility</span>
    </div>
  </main>

  <footer>
    <small>Built with CSS Flexbox &middot; 2026</small>
  </footer>
</body>
</html>

Open Sandbox

When flexbox is wrong

Flexbox is for one-dimensional layout: a row, or a column. The moment your design has rows AND columns that need to align across both axes, you want Grid. Common mistake: building a photo gallery with flexbox and fighting it for hours. Switch to Grid and watch your sanity return.

One more trick: align-self

Most alignment lives on the parent, but one item can override the group with align-self. Imagine a row of cards where one sticks out:

css

.cards { display: flex; align-items: center; gap: 16px; }
.cards .featured { align-self: stretch; } /* this one fills full height */

Quiz

Quiz1 / 4

What's the simplest flexbox sticky-footer setup?

Recap

Sticky footer: body as a min-height: 100vh flex column, main with flex: 1.
Card row that wraps: flex-wrap: wrap plus flex: 1 1 240px. Responsive without media queries.
Push to the right: margin-left: auto on one item.
Chips and tags: inline-flex on each chip, flex-wrap on the container.
Equal heights: free, because align-items defaults to stretch.
One item different: align-self overrides align-items for a single child.