CSS Flexbox Cheat Sheet: Every Property Explained
Complete Flexbox reference: container and item properties, alignment, wrapping, ordering, and common layout patterns.
Container Properties
display: flex;\nflex-direction: row | column | row-reverse | column-reverse;\nflex-wrap: nowrap | wrap | wrap-reverse;\njustify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;\nalign-items: stretch | flex-start | center | flex-end | baseline;\ngap: 1rem;Item Properties
flex: 1; /* grow=1, shrink=1, basis=0 */\norder: 2; /* visual order */\nalign-self: center; /* override container align */Try It Free
Use our free online tool — 100% client-side, no data leaves your browser.
Open CSS Minifier