CSS Flexbox Cheat Sheet - Complete Visual Guide (2026)

CSS Flexbox Cheat Sheet (2026)

Every Flexbox property you need in one place. Copy-paste ready.

Container Properties

/* Enable flexbox */
.container { display: flex; }

/* 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 */
align-items: stretch | flex-start | flex-end | center | baseline;

/* Gap between items */
gap: 8px; /* or row-gap / column-gap */

Item Properties

/* Grow factor */
flex-grow: 0 | 1; /* 1 = grow to fill space */

/* Shrink factor */
flex-shrink: 1; /* 0 = don't shrink */

/* Base size */
flex-basis: auto | 200px | 50%;

/* Shorthand */
flex: 1; /* = flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
flex: 0 0 200px; /* Fixed 200px item */

/* Self alignment */
align-self: auto | flex-start | flex-end | center | stretch;

/* Order */
order: 0 | 1 | -1; /* Lower = first */

Common Patterns

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

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

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

/* Sidebar + content */
.layout { display: flex; }
.sidebar { flex: 0 0 250px; }
.content { flex: 1; }

/* Holy grail layout */
.holy-grail { display: flex; flex-direction: column; min-height: 100vh; }
.holy-grail main { display: flex; flex: 1; }
.holy-grail .content { flex: 1; }
.holy-grail .sidebar { flex: 0 0 250px; }

Get 30+ Tailwind CSS components and 6 more developer products. Pay what you want: