CSS Flexbox Cheat Sheet (with Examples)

Flexbox is a one-dimensional layout system: it arranges items along a single axis (a row or a column) and gives you fine control over spacing, alignment, and how items grow or shrink. You set properties on a flex container (the parent), and they affect its direct flex items (the children). This cheat sheet covers every property worth knowing, with quick tables and copy-paste examples.

The mental model: container, items, and axes

Two pieces of vocabulary unlock everything else:

• Main axis — the direction items flow. It runs horizontally for a row, vertically for a column.
• Cross axis — perpendicular to the main axis.

flex-direction decides which is which. justify-content always works along the main axis; align-items always works along the cross axis. Internalize that and the rest is just lookup.

Turn it on

.container {
  display: flex;        /* block-level flex container */
}

.inline-container {
  display: inline-flex; /* flows inline, like a span */
}

Both make the direct children flex items. Nested elements deeper down are unaffected unless they’re also flex containers.

Container (parent) properties

Set these on the element with display: flex.

Property	Values	What it does
flex-direction	row (default) | row-reverse | column | column-reverse	Sets the main axis direction. row = left→right, column = top→bottom. The -reverse variants flip the order.
flex-wrap	nowrap (default) | wrap | wrap-reverse	Whether items spill onto new lines. nowrap forces everything onto one line (items shrink); wrap allows multiple lines.
justify-content	flex-start (default) | flex-end | center | space-between | space-around | space-evenly	Distributes items along the main axis. space-between pins first/last to the edges; space-evenly makes all gaps (including ends) equal.
align-items	stretch (default) | flex-start | flex-end | center | baseline	Aligns items on the cross axis. stretch fills the container height (row); baseline aligns text baselines.
align-content	stretch (default) | flex-start | flex-end | center | space-between | space-around | space-evenly	Aligns the wrapped lines as a group on the cross axis. Only has an effect when items wrap onto 2+ lines.
gap	<length> e.g. 1rem, or row-gap / column-gap	Space between items. Cleaner than margins — no extra space on the outer edges.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

align-content vs align-items: align-items positions items within their line; align-content positions the lines themselves. With a single line, align-content does nothing.

Item (child) properties

Set these on the flex items.

Property	Values	What it does
flex-grow	<number> (default 0)	How much an item grows to fill free space, relative to siblings. 2 grows twice as fast as 1. 0 means “don’t grow.”
flex-shrink	<number> (default 1)	How much an item shrinks when space is tight. 0 prevents shrinking below its basis.
flex-basis	auto (default) | <length> | 0	The item’s starting size on the main axis before grow/shrink. auto uses the item’s content/width.
flex	shorthand for grow shrink basis	Common values: flex: 1 (= 1 1 0, equal flexible columns), flex: auto (= 1 1 auto), flex: none (= 0 0 auto, rigid).
align-self	auto (default) | stretch | flex-start | flex-end | center | baseline	Overrides align-items for one item on the cross axis.
order	<integer> (default 0)	Reorders items visually. Lower numbers come first; negatives are allowed. (Visual only — doesn’t change DOM/tab order.)

.sidebar { flex: 0 0 240px; }  /* fixed 240px, no grow/shrink */
.main    { flex: 1; }          /* takes all remaining space    */
.badge   { align-self: flex-start; order: -1; }

Tip: flex: 1 is the workhorse for equal-width columns because it sets flex-basis: 0, so items size purely by their grow ratio rather than their content.

Main axis vs cross axis (the part everyone forgets)

The same property aligns differently depending on flex-direction:

flex-direction	Main axis	justify-content moves items…	align-items moves items…
row	horizontal	left ↔ right	up ↕ down
column	vertical	up ↕ down	left ↔ right

So if “center horizontally” stops working after you switch to column, that’s why — you now want align-items: center instead of justify-content: center.

Common patterns

Perfectly center a child (both axes)

.center {
  display: flex;
  justify-content: center; /* main axis  */
  align-items: center;     /* cross axis */
  min-height: 100vh;
}

The classic two-line centering trick. Works regardless of the child’s size.

Navbar: logo left, links right

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

<nav class="navbar">
  <a class="logo" href="/">Brand</a>
  <ul class="links"> /* group the right-side links in one element */
    <li><a href="/tools">Tools</a></li>
    <li><a href="/guides">Guides</a></li>
  </ul>
</nav>

space-between pushes the first child to the left edge and the last to the right. Need a single item shoved to the far side instead? Give it margin-left: auto.

Equal-width responsive columns (wrap + gap)

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.cards > * {
  flex: 1 1 250px; /* grow, shrink, ideal width 250px */
}

Each card aims for 250px, grows to fill the row, and wraps to a new line when there’s no room — a fluid grid with no media queries. Pair it with our free color picker when you’re dialing in card backgrounds and borders.

Sticky footer / fill remaining space

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

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

The <main> absorbs all leftover vertical space, so a short page still pins the footer to the bottom of the viewport.

Quick gotchas

• flex-basis vs width: On the main axis, flex-basis wins over width when both are set. Use flex-basis (or the flex shorthand) inside flex containers for predictable sizing.
• Items won’t shrink past their content? A flex item has an implicit min-width: auto, so it won’t shrink below its content’s minimum size. Add min-width: 0 (or min-height: 0 in a column) to let it shrink — essential for text truncation and preventing overflow.
• margin: auto is a superpower: An auto margin on a flex item soaks up all free space on that side. margin-left: auto shoves an item to the right; margin: auto centers a single item on both axes — no justify-content needed.
• gap beats margins: gap only adds space between items, never on the outer edges, so you avoid the “extra trailing margin” cleanup that margins require.
• order is cosmetic: It changes paint order, not the DOM. Screen readers and keyboard tab order still follow source order, so use it sparingly for accessibility.

Keep this page bookmarked — most layout questions come down to “which axis am I on, and is this a container or item property?”