Difference between justify-content vs align-items?
I'm having a really hard time understanding what's the difference? From my research it seems like justify-content can do... space-between and space-around, while align-items can do... stretch, baseline, initial and inherit?
Also looks like both properties share, flex-start, flex-end and center.
Is there and dis/advantages to using one over the other or is it just preference? I feel like they are way to similar to just do the same thing anyone know the difference? thanks!!
Answer
Note:
The X and Y axis / alignment direction can change depending if you are using flex-direction: row or column
1. justify-content: Horizontal
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
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/
In my opinion:
These should have been named:
flex-x: left or right or center or stretch or space-between or space-around
flex-y: left or right or center or stretch
But with html, you can never have nice things. Never.