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)
https://stackoverflow.com/questions/35049262/difference-between-justify-content-vs-align-items?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa
https://codepen.io/enxaneta/full/adLPwv