CSS Flexbox: A Visual Guide to Every Property

CSS Flexbox is the most widely used layout system in modern web development. Whether you're centering a div, building a navbar, or creating a responsive card grid, Flexbox handles it with a few lines of CSS. This guide covers everything you need, with practical examples you'll actually use.

The Two Axes

Flexbox works along two axes. Understanding these is the key to understanding everything else:

• Main axis — the direction items flow. Horizontal by default (row), or vertical with flex-direction: column.
• Cross axis — perpendicular to the main axis. If items flow horizontally, the cross axis is vertical, and vice versa.

Every Flexbox property either controls layout along the main axis or the cross axis. Once you internalize this mental model, the entire system clicks.

Getting Started: The Container

Add display: flex to a parent element, and its direct children become flex items:

.container {
  display: flex;
}

/* Items now sit in a row, taking their natural width */

That single line changes the layout from block (stacked vertically) to flex (side by side). From here, you add properties to control direction, alignment, spacing, and wrapping.

Container Properties

flex-direction

Controls the main axis direction:

flex-direction: row;            /* → left to right (default) */
flex-direction: row-reverse;    /* ← right to left */
flex-direction: column;         /* ↓ top to bottom */
flex-direction: column-reverse; /* ↑ bottom to top */

justify-content (main axis)

Distributes items along the main axis:

justify-content: flex-start;    /* pack items to the start */
justify-content: flex-end;      /* pack items to the end */
justify-content: center;        /* center items */
justify-content: space-between; /* equal space between items */
justify-content: space-around;  /* equal space around items */
justify-content: space-evenly;  /* truly equal spacing */

align-items (cross axis)

Aligns items along the cross axis:

align-items: stretch;    /* fill the container height (default) */
align-items: flex-start; /* align to the top */
align-items: flex-end;   /* align to the bottom */
align-items: center;     /* center vertically */
align-items: baseline;   /* align text baselines */

gap

The modern way to add spacing between flex items. No more margin hacks:

gap: 16px;           /* equal row and column gap */
gap: 16px 24px;      /* row-gap column-gap */
row-gap: 16px;       /* vertical gap only */
column-gap: 24px;    /* horizontal gap only */

flex-wrap

By default, flex items try to fit on one line. Enable wrapping for responsive layouts:

flex-wrap: nowrap; /* all items on one line (default) */
flex-wrap: wrap;   /* items wrap to next line */

Item Properties

flex-grow, flex-shrink, flex-basis

These three properties control how items size themselves. The shorthand flex is the recommended way to set them:

/* flex: <grow> <shrink> <basis> */
flex: 0 1 auto;  /* default — don't grow, can shrink, natural width */
flex: 1;         /* grow to fill available space */
flex: 1 1 0;     /* grow equally, ignore content width */
flex: 0 0 200px; /* fixed 200px, don't grow or shrink */

When multiple items have flex: 1, they share the available space equally. Give one item flex: 2 and it takes twice as much space as the others.

align-self

Override the container's align-items for a single item:

.special-item {
  align-self: flex-end; /* this item sits at the bottom */
}

Common Patterns

1. Center Anything

The most common Flexbox use case — centering both horizontally and vertically:

.center-it {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  min-height: 100vh;       /* or whatever height you need */
}

2. Navigation Bar

Logo on the left, links on the right:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

3. Responsive Card Grid

Cards that wrap and fill available space:

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

.card {
  flex: 1 1 300px; /* grow, shrink, min 300px before wrapping */
  /* Cards fill the row, wrapping when they can't fit */
}

4. Sticky Footer

Footer sticks to the bottom even when content is short:

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

.content {
  flex: 1; /* takes all available space, pushing footer down */
}

.footer {
  /* naturally sits at the bottom */
}

5. Holy Grail Layout

Header, footer, sidebar, and main content:

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

.body {
  display: flex;
  flex: 1;
}

.sidebar { flex: 0 0 250px; }
.main    { flex: 1; }

/* On mobile, stack vertically */
@media (max-width: 768px) {
  .body { flex-direction: column; }
  .sidebar { flex-basis: auto; }
}

Flexbox vs Grid: When to Use Which

They're complementary, not competing. Here's the simple rule:

• Flexbox — one-dimensional layout. Use for navbars, button groups, card rows, centering, and any layout that flows in a single direction.
• Grid — two-dimensional layout. Use for page-level layouts, dashboards, image galleries, and anything that needs rows and columns simultaneously.

In practice, most layouts use both: Grid for the page structure, Flexbox for the components inside it.

Quick Reference

Build Layouts Visually

Use our CSS Flexbox Generator to visually experiment with every Flexbox property and instantly get the CSS code. Or try the CSS Grid Generator for two-dimensional layouts. Both tools run entirely in your browser with no signup required.