CSS Flexbox Complete Guide: Every Property with Visual Examples

Flexbox solves the most common CSS layout challenges — centering, equal-height columns, and responsive navigation — with clean, readable code. This guide covers every property you need.

The Core Concept

Flexbox works on a container/items model:

• The flex container (parent) controls layout direction and spacing
• Flex items (children) control how they grow, shrink, and align

.container {
  display: flex; /* or display: inline-flex */
}

Container Properties

flex-direction — The Main Axis

.container {
  flex-direction: row;            /* → default: left to right */
  flex-direction: row-reverse;    /* ← right to left */
  flex-direction: column;         /* ↓ top to bottom */
  flex-direction: column-reverse; /* ↑ bottom to top */
}

justify-content — Main Axis Alignment

.container {
  justify-content: flex-start;    /* [■■■        ] */
  justify-content: flex-end;      /* [        ■■■] */
  justify-content: center;        /* [    ■■■    ] */
  justify-content: space-between; /* [■    ■    ■] */
  justify-content: space-around;  /* [ ■  ■  ■  ] */
  justify-content: space-evenly;  /* [  ■  ■  ■ ] */
}

align-items — Cross Axis Alignment

.container {
  align-items: stretch;    /* default: items fill container height */
  align-items: flex-start; /* items align to top */
  align-items: flex-end;   /* items align to bottom */
  align-items: center;     /* items center vertically */
  align-items: baseline;   /* items align by text baseline */
}

flex-wrap

.container {
  flex-wrap: nowrap;       /* default: single line, items may shrink */
  flex-wrap: wrap;         /* multi-line: items wrap to next row */
  flex-wrap: wrap-reverse; /* multi-line: wraps upward */
}

gap (Modern, Recommended)

.container {
  gap: 16px;         /* both row and column gap */
  row-gap: 16px;     /* gap between rows */
  column-gap: 24px;  /* gap between columns */
}

/* Old way (still works, less clean) */
.item + .item { margin-left: 16px; }

Item Properties

flex-grow, flex-shrink, flex-basis

.item {
  flex-grow: 0;    /* default: don't grow beyond content size */
  flex-shrink: 1;  /* default: shrink if needed */
  flex-basis: auto; /* default: size based on content */
}

/* Shorthand: flex: grow shrink basis */
.item { flex: 0 1 auto; }  /* default */
.item { flex: 1; }          /* flex: 1 1 0 — grows to fill available space */
.item { flex: auto; }       /* flex: 1 1 auto — grows based on content size */
.item { flex: none; }       /* flex: 0 0 auto — rigid, no flex */

/* Practical: one item fills remaining space */
.sidebar { flex: 0 0 280px; }  /* fixed 280px */
.main    { flex: 1; }           /* fills the rest */

align-self — Override for Individual Items

.container { align-items: flex-start; }

.special-item { align-self: flex-end; } /* this item aligns to bottom */
.another-item { align-self: center; }   /* this item centers */

order

/* Change visual order without changing HTML */
.first-visually  { order: -1; } /* appears first */
.item            { order: 0; }  /* default */
.last-visually   { order: 1; }  /* appears last */

Common Real-World Patterns

Perfect Centering (The Classic Flexbox Win)

/* Center anything, horizontally and vertically */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* fill viewport */
}

Navigation Bar

.navbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
}

.navbar-brand { font-size: 1.5rem; font-weight: bold; }

/* Push everything after this to the right */
.navbar-spacer { flex: 1; }

.navbar-links {
  display: flex;
  gap: 16px;
}

<nav class="navbar">
  <a class="navbar-brand">Logo</a>
  <div class="navbar-spacer"></div>
  <div class="navbar-links">
    <a>Home</a>
    <a>Docs</a>
    <a>Blog</a>
  </div>
  <button>Sign In</button>
</nav>

Card Grid (Responsive)

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 300px; /* grow, shrink, min-width 300px */
  max-width: calc(33.33% - 16px);
}

Sticky Footer

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

main {
  flex: 1; /* pushes footer to bottom */
}

footer {
  /* sits at the bottom */
}

Equal-Height Cards

/* Cards in a row always have same height */
.row {
  display: flex;
  align-items: stretch; /* default — stretches all children to tallest */
}

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-body { flex: 1; } /* body fills available space */
.card-footer { margin-top: auto; } /* footer always at bottom */

Flexbox vs Grid: Quick Decision

Debugging Tips

/* Temporary: add outline to see flex items */
.container > * {
  outline: 2px solid red;
}

/* In DevTools: select container, check "flex" badge */
/* Firefox DevTools has the best flexbox visualization */

Browser Support

Flexbox has 99%+ browser support in 2026. No need for vendor prefixes.

→ Convert between CSS units with the CSS Unit Converter tool.