CSS Flexbox Cheatsheet
Flexbox = 1-D layout (row or column). Use Grid for 2-D.
1 credit
Container
8 itemsEnable
display: flex / inline-flexDirection
flex-direction: row | row-reverse | column | column-reverseWrap
flex-wrap: nowrap | wrap | wrap-reverseShorthand
flex-flow: row wrapMain-axis align
justify-content: flex-start | center | space-between | space-around | space-evenlyCross-axis align
align-items: stretch | flex-start | center | baseline | flex-endMulti-line align
align-content: space-between | center | stretch (needs flex-wrap)Gap between items
gap: 1rem / row-gap | column-gapItem
6 itemsGrow
flex-grow: 1 (share remaining space)Shrink
flex-shrink: 0 (don't shrink)Basis (start size)
flex-basis: 200pxShorthand
flex: 1 0 auto (grow, no shrink, auto basis)Override align-items
align-self: centerReorder
order: -1 (negative = earlier)Common patterns
css
/* Center both axes */
.centered { display: flex; align-items: center; justify-content: center; }
/* Sidebar + main (main fills) */
.layout { display: flex; gap: 1rem; }
.sidebar { flex: 0 0 260px; }
.main { flex: 1; min-width: 0; /* prevent overflow */ }
/* Sticky footer w/ content */
body { display: flex; flex-direction: column; min-height: 100dvh; }
main { flex: 1; }