CSS Flexbox Cheatsheet
Flexbox is for laying out items in a single direction — a row or a column. These are the container and item properties you reach for, grouped so the model makes sense.
Enable flex (on the container)
Make an element a flex container.
Lay items along the main axis.
Allow items to wrap onto new lines.
Main-axis alignment
Center items along the main axis.
Equal space between items, none at ends.
Equal space around each item.
Space between items (works in flex too).
Cross-axis alignment
Center items on the cross axis.
Stretch items to fill (default).
Align wrapped lines as a group.
Item properties
Let an item grow to fill free space.
Stop an item from shrinking.
Starting size before grow/shrink.
Shorthand: grow 1, shrink 1, basis 0.
Override cross-axis alignment for one item.
Reorder an item visually.