The playground — main axis vs cross axis
One rule — display:flex — turns a box into a flex container. Its children
flow along the main axis (set by flex-direction); justify-content
distributes them on that axis and align-items aligns them on the perpendicular
cross axis. Change the three selects and watch the three items reflow live.
A
B
C
—
flex-grow / flex-shrink / flex-basis & the flex shorthand
Defaults: flex-grow:0 (don't grow), flex-shrink:1 (can shrink),
flex-basis:auto (start from width/height) — i.e. the shorthand default is
flex: 0 1 auto. Set flex:1 and the item absorbs free space
(it expands to flex: 1 1 0%). Click a preset:
1
1
1
—