🎓 View our courses: https://scrimba.com/links/all-courses
This tutorial is a part of "The Responsive Web Design Bootcamp" on Scrimba. Explore the full course here: https://rebrand.ly/responsivebootcamp_yt
flex-direction works by switching the main axis, which is a bit strange as it means that justify-content switches from controlling content horizontally to vertically, and align-items switches from the vertical to horizontal.
Why this happens
justify-content controls content on the main axis of a flex container. So when we set flex-direction: column, we are changing the main axis from being horizontal to vertical instead.
Similarly, align-items controls items along the cross axis, which gets switched from the vertical axis to the horizontal axis.