justify-content vs align-items
(Note: The X and Y axis / alignment direction can change depending
if you are using flex-direction: row or column)
1. justify-content: Horizontal-X-axis
Alignment & Spacing along primary axis (X-axis)
flex-start; Align children horizontally left
flex-end; Align children horizontally right
center; Align children horizontally centered (amaze!)
space-between; Distribute children horizontally evenly across
entire width
space-around; Distribute children horizontally evenly across
entire width (but with space on the edges
2. align-items: Vertical-Y-axis
Alignment only along secondary axis (Y-axis)
flex-start; Align children vertically top
flex-end; Align children vertically bottom
center; Align children vertically centered (amaze!)
baseline; Aligned children vertically so their baselines align
(doesn't really work)
stretch; Force children to be height of container (great for columns)
See it in action:
http://codepen.io/enxaneta/full/adLPwv/