🎨 CSS Flexbox Sheet

Cheat Sheets

Every flexbox property and what it actually does — every row copyable

Every flexbox property and what it actually does

display: flexturn a container into a flex row

flex-direction: columnstack children vertically

justify-content: centercenter along the main axis

align-items: centercenter along the cross axis

gap: 1remspace between children (use this!)

flex-wrap: wrapwrap children to new lines

flex: 1child grows to fill free space

flex: 0 0 autochild stays at its natural size

align-self: flex-endoverride alignment for one child

order: -1move a child to the front

flex-grow: 2take double share of free space

flex-shrink: 0never shrink below content size

min-width: 0let flex children truncate text

margin-left: autopush everything after it right

height: 100dvhfull mobile viewport height

One of 1095+ instant kits on SlashAI — free forever, nothing uploaded, no account.