space between flexbox
justify-content: space-between;
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/
Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us