CSS Flexbox Cheat Sheet
Free CSS Flexbox cheat sheet: container and item properties, justify-content, align-items, flex-grow, gap, and the layouts people actually use — with worked…
Turning it on
| Concept | Syntax | Example |
|---|---|---|
| display: flex Makes the container a flex container. Children become flex items. | display: flex | .row { display: flex; } |
| inline-flex Like flex, but the container itself behaves inline (e.g. for buttons). | display: inline-flex | .badge { display: inline-flex; } |
| The two axes EVERY flex property targets one axis or the other. Master this first. | main axis vs cross axis | row → main=horizontal, cross=vertical |
Container — direction & wrap
| Concept | Syntax | Example |
|---|---|---|
| flex-direction Sets the main axis. Default is row (horizontal). | row | row-reverse | column | column-reverse | flex-direction: column; |
| flex-wrap Default is nowrap (everything stays in one line). wrap lets items drop down. | nowrap | wrap | wrap-reverse | flex-wrap: wrap; |
| flex-flow Shorthand for direction + wrap. | flex-flow: row wrap | flex-flow: column wrap; |
| gap Modern spacing between items — no margin hacks. | gap: 1rem; | .row { display:flex; gap: 1rem; } |
Container — alignment
| Concept | Syntax | Example |
|---|---|---|
| justify-content (main) How items are spaced along the MAIN axis. | flex-start | flex-end | center | space-between | space-around | space-evenly | justify-content: space-between; |
| align-items (cross) How items align on the CROSS axis. Default stretch fills full height. | stretch | flex-start | flex-end | center | baseline | align-items: center; |
| align-content (wrapped rows) Only does anything when items WRAP into multiple rows. | same as justify-content | align-content: center; |
| Centering everything The 'perfect centering' pattern people search for. | justify + align center | display:flex; justify-content:center; align-items:center; |
Item — sizing
| Concept | Syntax | Example |
|---|---|---|
| flex-grow How much an item grows to fill extra space. 0 = don't grow. | flex-grow: 1 | .main { flex-grow: 1; } |
| flex-shrink Whether an item shrinks if space is tight. Default 1 (yes); 0 = never shrink. | flex-shrink: 0 | .logo { flex-shrink: 0; } |
| flex-basis The item's starting size BEFORE growing/shrinking. | flex-basis: 200px | flex-basis: 30%; |
| flex shorthand Most common values: flex: 1 (equal share), flex: 0 0 auto (fixed). | flex: grow shrink basis | flex: 1 1 0; /* equal columns */ |
Item — alignment & order
| Concept | Syntax | Example |
|---|---|---|
| align-self Override align-items for just one item. | align-self: flex-end | .badge { align-self: flex-start; } |
| order Visually re-arrange items without changing HTML. Default 0; lower = earlier. | order: 2 | .pinned { order: -1; } |
Common patterns
| Concept | Syntax | Example |
|---|---|---|
| Nav bar with right-aligned button Logo on the left, button on the right, vertically centered. | justify-content: space-between | .nav { display:flex; justify-content:space-between; align-items:center; } |
| Equal columns Children share available space evenly. | flex: 1 | .col { flex: 1; } |
| Sticky footer Footer hugs the bottom even with little content. | column + flex-grow on main | body{display:flex;flex-direction:column;min-height:100vh} main{flex:1} |
| Sidebar + content Sidebar stays 240px, main fills the rest. | fixed sidebar, growing main | aside{flex:0 0 240px} main{flex:1} |
| Wrap to grid Cards 250px wide that wrap onto new rows responsively. | flex-wrap + flex-basis | .card{flex:1 1 250px} |