CSS Flexbox Cheatsheet

CSS Flexbox Cheatsheet

Container: display and direction

Put display: flex on the parent. Children become flex items and sit in a row by default. Use flex-direction: column to stack them vertically. flex-wrap: wrap lets items move to the next line when there’s no room.

.nav { display: flex; gap: 1rem; }
.stack { display: flex; flex-direction: column; gap: 0.5rem; }
.cards { display: flex; flex-wrap: wrap; gap: 1rem; }

Aligning on the main axis (justify-content)

How items are distributed along the row (or column): at the start, end, center, or with space between them.

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

/* centered block */
.hero { display: flex; justify-content: center; align-items: center; min-height: 100vh; }

/* buttons with equal space between */
.toolbar { display: flex; justify-content: space-between; gap: 0.5rem; }

Values: flex-start, flex-end, center, space-between, space-around, space-evenly.

Aligning on the cross axis (align-items)

When items are in a row, this controls vertical alignment. Default is stretch (items fill the height). Use center to middle them, or flex-start / flex-end.

.card-row {
  display: flex;
  align-items: stretch;  /* same height cards */
  gap: 1rem;
}
.centered-row {
  display: flex;
  align-items: center;  /* vertically centered */
  gap: 0.5rem;
}

Gap

gap: 1rem adds space between items. No need for margin hacks. Use row-gap and column-gap if you want different spacing.

Items: flex grow, shrink, basis

flex: 1 means the item can grow to fill space and shrink if needed. Great for equal-width columns. flex: 0 0 200px means fixed 200px, no grow or shrink (e.g. a sidebar).

/* three equal columns */
.cols { display: flex; }
.cols > * { flex: 1; }

/* sidebar 240px, rest for content */
.layout { display: flex; }
.sidebar { flex: 0 0 240px; }
.main { flex: 1; }

One item can override the parent’s alignment: align-self: center. Change visual order without touching the DOM: order: 1 (higher number = later).

Flex-shrink and overflow. By default flex items have flex-shrink: 1, so they can shrink when space is tight. Long text or a wide image can force the layout. Give the item min-width: 0 (or overflow: hidden and a width) so it can shrink below its content size. Cards in a flex row often need min-width: 0 so the text truncates or wraps instead of bursting the row.

Full examples

Center a single block in the viewport:

.centered {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Row of cards that wrap, with equal height in each row:

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.gallery .card {
  flex: 1 1 200px;
  min-width: 0;
}

Sticky footer (main fills the space, footer at bottom):

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

Navbar: logo left, links right. The logo doesn’t grow, the links sit at the end. Use margin-inline-start: auto on the nav so it pushes to the right, or wrap the links in a flex container with justify-content: flex-end.

.navbar {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.navbar .links {
  margin-inline-start: auto;
  display: flex;
  gap: 0.5rem;
}

Form row: label and input side by side. Flex the row, give the label a fixed or min width so inputs align.

.form-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.form-row label { min-width: 8ch; }
.form-row input { flex: 1; min-width: 0; }

Wrap behavior. With flex-wrap: wrap, items wrap when they don’t fit. Use flex: 1 1 200px so each item has a minimum width (e.g. 200px) but can grow. Without a basis or min-width, very small items can bunch up. With only flex: 1 and no wrap, they share space equally and never wrap.

Use our CSS Color cheatsheet for colors.