css - Difference between justify-content vs align-items? -


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

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -