CSS Flexbox: The Complete Guide

Flexbox is the CSS layout engine for distributing space in one dimension — rows or columns. This guide covers the mental model, every property, and gives you 5 copy-paste patterns for common layouts. Want to experiment visually? Use the free flexbox playground →

The flexbox mental model

Flexbox works on two axes: the main axis (set by flex-direction) and the cross axis (perpendicular to it). Everything in flexbox is about distributing space and aligning items along these two axes.

.container {
  display: flex;
  flex-direction: row;        /* main axis: horizontal (default) */
  justify-content: center;    /* align along main axis */
  align-items: center;        /* align along cross axis */
  gap: 16px;                  /* space between items */
}

The essential properties

Container properties

/* Direction */
flex-direction: row | row-reverse | column | column-reverse;

/* Wrapping */
flex-wrap: nowrap | wrap | wrap-reverse;

/* Main axis alignment */
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

/* Cross axis alignment (single line) */
align-items: stretch | flex-start | flex-end | center | baseline;

/* Cross axis alignment (multi-line, when wrapping) */
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

/* Gap */
gap: 16px;              /* row and column gap */
row-gap: 16px;          /* just row gap */
column-gap: 12px;       /* just column gap */

Item properties

/* How much an item should grow relative to siblings */
flex-grow: 0;   /* default: don't grow */
flex-grow: 1;   /* take up available space */

/* How much an item should shrink */
flex-shrink: 1; /* default: allow shrinking */
flex-shrink: 0; /* don't shrink below basis */

/* Starting size before grow/shrink is applied */
flex-basis: auto | 200px | 50%;

/* Shorthand (grow, shrink, basis) */
flex: 1;            /* same as flex: 1 1 0% */
flex: 0 0 200px;    /* fixed-width item */

/* Override align-items for a single item */
align-self: auto | flex-start | flex-end | center | stretch;

/* Reorder visually (not in DOM) */
order: 0; /* default, lower = earlier */

Live demo

Copy-paste flexbox patterns

/* Centered both axes (the holy grail) */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Navbar: logo left, links right */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Equal-width columns */
.columns {
  display: flex;
  gap: 16px;
}
.columns > * {
  flex: 1;
}

/* Sticky footer layout */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page > main {
  flex: 1;
}

/* Wrap into a grid-like layout */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card-grid > * {
  flex: 1 1 300px; /* min 300px, grow to fill */
}

Flexbox vs Grid

• Flexbox is one-dimensional — it excels at laying out items in a row or a column. Use it for navbars, button groups, centering, and distributing space in one direction.
• Grid is two-dimensional — it controls rows and columns simultaneously. Use it for page layouts, card grids, and anything that needs alignment in both directions.
• Combine them: Use grid for the page layout and flexbox for the components inside each grid cell.

Flexbox in Tailwind CSS

<div class="flex items-center justify-between gap-4">
  <div class="flex-1">Grows</div>
  <div class="flex-none">Fixed</div>
  <div class="flex-1">Grows</div>
</div>

Key utilities: flex, inline-flex, flex-row, flex-col, flex-wrap, justify-*, items-*, gap-*, flex-1, flex-none, flex-grow, flex-shrink, self-*, order-*.

Common flexbox gotchas

• Images stretch. Images inside a flex container default to align-items: stretch. Add align-self: flex-start or set a fixed height.
• Text overflow. Long words in flex items can break layouts. Use min-width: 0 on the item and overflow-wrap: break-word on the text.
• margin: auto absorbs space. margin-left: auto on a flex item pushes it to the right — this is how you push the last nav link to the right side.
• flex-basis vs width. flex-basis sets the initial size before grow/shrink. It overrides width in row direction and height in column direction.

FAQ

What is the difference between flexbox and grid?

Flexbox is one-dimensional — it lays out items in a row or column. Grid is two-dimensional — it controls rows and columns simultaneously. Use flexbox for navbars, button groups, and single-direction layouts. Use grid for page-level layouts and card grids.

What does flex: 1 mean?

flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. It tells the item to grow and take up an equal share of available space.

How do I center something with flexbox?

Set display: flex, justify-content: center, and align-items: center on the parent container. This centers the children both horizontally and vertically.

Why does my flex item overflow?

Flex items default to min-width: auto, which prevents them from shrinking below their content size. Add min-width: 0 to the item to allow it to shrink, and use overflow-wrap: break-word on text.

Related tools