Flexbox Playground
tweak properties → see layout change live
item properties (click an item to select)
cheatsheet
justify-content (main axis)
flex-start → pack items to start
flex-end → pack items to end
center → center items
space-between → max space between
space-around → equal space around
space-evenly → truly equal gaps
align-items (cross axis)
flex-start → align to top (row) or left (col)
flex-end → align to bottom or right
center → center on cross axis
stretch → fill container height
baseline → align text baselines