css - Difference between justify-content vs align-items? -
this question has answer here:
i'm having hard time understanding what's difference? research seems justify-content can do... space-between , space-around, while align-items can do... stretch, baseline, initial , inherit?
also looks both properties share, flex-start, flex-end , center.
is there , dis/advantages using 1 on other or preference? feel way similar same thing know difference? thanks!!
note:
the x , y axis / alignment direction can change depending if 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 space on edges
2. align-items: vertical
alignment 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 baselines align (doesn't work)
stretch; force children height of container (great columns)
see in action:
http://codepen.io/enxaneta/full/adlpwv/
in 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 html, can never have nice things. never.
Comments
Post a Comment