CSSFlexboxLayoutUI Patterns

CSS Flexbox Layout Patterns Every Developer Should Know

Flexbox solves 90% of UI layout challenges. This guide covers the 10 most common patterns — centered content, sticky footer, navigation bars, card rows, and masonry-style lists.

U

UIXplor Team

February 25, 2026 · 7 min read

✦

01The Core Mental Model

Flexbox works on a single axis at a time. The main axis runs in the `flex-direction`. The cross axis is perpendicular:

css
.flex { display: flex; }
/* Default: flex-direction: row, items align on cross axis */

/* Center both axes */
.center { display: flex; align-items: center; justify-content: center; }

/* Grow one item to fill space */
.fill { flex: 1; }

02The Holy Grail Layout

Sticky header, scrollable main, sticky footer — the layout that stumped developers for years:

css
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}
main { flex: 1; } /* Push footer to bottom */

Two lines of CSS. Zero tricks.

03Space Distribution Patterns

css
/* Spread items with gaps between */
.space-between { justify-content: space-between; }

/* Equal spacing around items */
.space-around { justify-content: space-around; }

/* Navbar: logo left, links right */
.navbar { display: flex; align-items: center; }
.navbar .logo { margin-right: auto; } /* Push everything else right */

`margin: auto` in flexbox absorbs all available space in that direction.

04Wrapping Card Rows

css
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 280px; /* grow, shrink, base 280px */
  max-width: 400px;
}

Cards grow to fill space but wrap when the row gets too narrow. The `max-width` prevents cards from stretching too wide in large containers.

Related UI Components

◈

Collections

All UI component collections

Back to Blog