Flexbox Cheatsheet

Container Properties (on the parent)

display: flex | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <direction> <wrap>;         /* shorthand for both */
justify-content: ...;                  /* main axis alignment */
align-items: ...;                      /* cross axis alignment (single line) */
align-content: ...;                    /* cross axis alignment (multi-line) */
place-content: <align-content> <justify-content>;  /* shorthand */
gap: <row-gap> <column-gap>;
row-gap: ...;
column-gap: ...;

---

justify-content — Main Axis Alignment

flex-direction: row (→ is main axis)

flex-start       [A][B][C]            ]
flex-end         [          [A][B][C] ]
center           [    [A][B][C]       ]
space-between    [ [A]    [B]    [C]  ]
space-around     [  [A]  [B]  [C]    ]
space-evenly     [ [A]  [B]  [C]     ]  (equal space including edges)
stretch          fills the container

---

align-items — Cross Axis (Single Line)

flex-direction: row (↕ is cross axis)

stretch         [ A  B  C  ]  (all items same height — default)
flex-start      [ A  B  C  ]  (items at top)
flex-end        [ A  B  C  ]  (items at bottom)
center          [ A  B  C  ]  (items vertically centered)
baseline        items aligned by first line of text

---

align-content — Multi-Line (with flex-wrap)

Only matters when flex-wrap:wrap AND there are multiple rows

flex-start      rows at top
flex-end        rows at bottom
center          rows vertically centered
space-between   rows spread top-to-bottom
space-around    equal space around rows
stretch         rows stretch to fill container (default)

---

Item Properties (on the children)

flex-grow: 0;        /* How much extra space to absorb (0 = don't grow) */
flex-shrink: 1;      /* How much to shrink if needed (1 = can shrink) */
flex-basis: auto;    /* Starting size before grow/shrink */
flex: <grow> <shrink> <basis>;  /* Shorthand */

align-self: auto | flex-start | flex-end | center | baseline | stretch;
order: 0;            /* Visual order — lower = earlier */

---

flex Shorthand Quick Reference

Value	Equivalent	Meaning
flex: 1	1 1 0%	Grow, shrink, start at 0 — fill available space
flex: auto	1 1 auto	Grow and shrink from natural size
flex: none	0 0 auto	Fixed — don't grow or shrink
flex: initial	0 1 auto	Browser default — shrink only
flex: 0 0 200px	—	Fixed 200px — won't grow or shrink
flex: 1 0 200px	—	At least 200px, will grow

---

Common Flex Patterns

/* Center anything */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Space between nav items, right-align last */
.c-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.c-nav__spacer { flex: 1; }  /* Pushes everything after it to the right */

/* Equal-width columns */
.o-grid { display: flex; gap: 1.5rem; }
.o-grid > * { flex: 1; }

/* Sidebar + content */
.l-sidebar-layout { display: flex; gap: 2rem; }
.c-sidebar { flex: 0 0 280px; }
.c-content  { flex: 1; min-width: 0; } /* min-width:0 prevents overflow */

/* Card: push footer to bottom */
.c-card { display: flex; flex-direction: column; }
.c-card__body { flex: 1; }  /* Takes all available space → footer pinned */

/* Horizontally scrollable row */
.o-scroll-row {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.o-scroll-row > * { flex: 0 0 280px; scroll-snap-align: start; }

/* Responsive wrap: 3-up on desktop, 1-up on mobile */
.o-flex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.o-flex-grid > * { flex: 1 1 280px; }  /* Wrap below 280px */

---

Flex Axis Reference

flex-direction: row (default)
  Main axis: horizontal →
  Cross axis: vertical ↕
  justify-content → controls horizontal (→)
  align-items → controls vertical (↕)

flex-direction: column
  Main axis: vertical ↓
  Cross axis: horizontal ↔
  justify-content → controls vertical (↓)
  align-items → controls horizontal (↔)

---

Common Gotchas

/* ❌ Flex child with long text overflows */
.c-content { flex: 1; }
/* ✅ Fix: */
.c-content { flex: 1; min-width: 0; }

/* ❌ Images stretch in flex container */
img { /* default align-self: stretch */ }
/* ✅ Fix: */
img { align-self: flex-start; }
/* Or on container: */
.c-flex { align-items: flex-start; }

/* ❌ gap on flex not supported (old) — use margin instead for IE */
/* ✅ In 2026: gap on flex has 97%+ support — just use gap */

/* ❌ flex:1 doesn't make column equal height */
/* flex:1 means flex-grow:1 — items expand laterally, share main-axis space */
/* For equal height columns: use align-items:stretch (the default) */