CSS Flexbox Cheatsheet — Every Property with Visual Examples

CSS Flexbox provides a one-dimensional layout system for arranging elements in rows or columns. With 12 container properties and 6 item properties, flexbox handles alignment, spacing, and responsive behavior that previously required hacks.

Use the Flexbox Generator to build flexbox layouts visually and copy the CSS.

Setting up flexbox

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

All direct children become flex items. The parent becomes the flex container.

Flex container properties

flex-direction

Controls the main axis direction:

.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 */
}

flex-wrap

Whether items wrap to a new line:

.container {
  flex-wrap: nowrap;      /* Default: single line, items shrink */
  flex-wrap: wrap;        /* Items wrap to next line */
  flex-wrap: wrap-reverse; /* Wrap, but lines stack in reverse order */
}

flex-flow

Shorthand for flex-direction + flex-wrap:

.container {
  flex-flow: row wrap;           /* Row direction with wrapping */
  flex-flow: column nowrap;      /* Column, no wrap */
}

justify-content

Aligns items along the main axis (horizontal in row, vertical in column):

.container {
  justify-content: flex-start;    /* Default: pack at start */
  justify-content: flex-end;      /* Pack at end */
  justify-content: center;        /* Center items */
  justify-content: space-between; /* Even gaps between items */
  justify-content: space-around;  /* Even gaps around items */
  justify-content: space-evenly;  /* Equal space between all items */
}

align-items

Aligns items along the cross axis (vertical in row, horizontal in column):

.container {
  align-items: stretch;     /* Default: stretch to fill cross axis */
  align-items: flex-start;  /* Align to start of cross axis */
  align-items: flex-end;    /* Align to end of cross axis */
  align-items: center;      /* Center on cross axis */
  align-items: baseline;    /* Align text baselines */
}

align-content

Aligns wrapped lines when there are multiple rows (only affects multi-line containers):

.container {
  flex-wrap: wrap;
  align-content: flex-start;    /* Lines at start */
  align-content: flex-end;      /* Lines at end */
  align-content: center;        /* Lines centered */
  align-content: space-between; /* Space between lines */
  align-content: space-around;  /* Space around lines */
  align-content: stretch;       /* Default: lines stretch to fill */
}

gap

Space between flex items:

.container {
  gap: 16px;           /* Same gap in all directions */
  gap: 16px 24px;      /* row-gap column-gap */
  row-gap: 16px;
  column-gap: 24px;
}

Flex item properties

flex-grow

How much an item expands to fill available space (default: 0 — don’t grow):

.item { flex-grow: 0; }  /* Don't grow */
.item { flex-grow: 1; }  /* Grow to fill space */

/* Proportional growth: */
.sidebar { flex-grow: 1; }   /* Takes 1 unit of space */
.main    { flex-grow: 2; }   /* Takes 2 units (twice as wide) */

flex-shrink

How much an item shrinks when space is tight (default: 1 — will shrink):

.item      { flex-shrink: 1; }  /* Default: will shrink */
.item      { flex-shrink: 0; }  /* Won't shrink (may overflow) */
.important { flex-shrink: 0; }  /* Maintains its size always */

flex-basis

The item’s initial size before growing or shrinking:

.item { flex-basis: auto; }    /* Default: use width/height */
.item { flex-basis: 200px; }   /* Start at 200px */
.item { flex-basis: 30%; }     /* Start at 30% of container */
.item { flex-basis: 0; }       /* Start from zero (flex-grow fills all) */

flex (shorthand)

The most important: flex-grow flex-shrink flex-basis:

.item { flex: 0 1 auto; }   /* Default: don't grow, do shrink, auto basis */
.item { flex: 1; }           /* flex: 1 1 0% — grow equally */
.item { flex: auto; }        /* flex: 1 1 auto — grow and shrink based on content */
.item { flex: none; }        /* flex: 0 0 auto — don't grow or shrink */

/* Common patterns: */
.equal-columns { flex: 1; }   /* Each takes equal space */
.sidebar { flex: 0 0 240px; } /* Fixed 240px, won't grow or shrink */
.main { flex: 1 1 0; }        /* Takes remaining space */

align-self

Override align-items for a specific item:

.item { align-self: auto; }       /* Inherit align-items */
.item { align-self: flex-start; }
.item { align-self: flex-end; }
.item { align-self: center; }
.item { align-self: stretch; }

order

Reorder items visually (doesn’t change DOM order):

.item { order: 0; }   /* Default: source order */
.first { order: -1; } /* Move before other items */
.last  { order: 1; }  /* Move after other items */

Note: order only affects visual order. Screen readers and keyboard navigation follow DOM order. Don’t use order to change meaningful content sequence.

Common flexbox patterns

Centered content

/* Center a single item both axes: */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Navigation bar

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

.nav-brand { font-weight: bold; }

.nav-links {
  display: flex;
  gap: 16px;
  margin-left: auto;  /* Push to right side */
}

Card row with equal heights

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

.card {
  flex: 1 1 280px;  /* Grow, shrink, basis 280px */
  /* All cards same height automatically */
}

Sidebar layout

.layout {
  display: flex;
  gap: 24px;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 240px;  /* Fixed 240px */
}

.main {
  flex: 1;  /* Take remaining space */
}

Footer pushed to bottom

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

main {
  flex: 1;  /* Grows to push footer down */
}

footer {
  /* Stays at bottom */
}

Flexbox vs Grid

• Flexbox: One-dimensional (row OR column). Best for components, navigation, button groups, centering.
• Grid: Two-dimensional (rows AND columns). Best for page layout, card grids, complex positioning.

Use flexbox inside grid cells for component-level layout.

Related tools

• Flexbox Generator — build flexbox layouts visually
• Flexbox Layout Tutorial — layout patterns guide
• CSS Flexbox Guide — comprehensive reference