In Flexbox, we control how items are placed within the container. A container is a box with X and Y axis. The Flexbox’s property name doesn’t use X, Y, Left, Top wordings. It’s because we can set
flex-direction to control the Main Axis. The other axis is called Cross Axis.
flex-direction: row; /* Align from left to right. */
flex-direction: column; /* Align from top to bottom. */
align and justify
We can now better unterstand the align and justify after we learn the direction concept.
align-items aligns items on the cross axis and
justify-content algins items on the main axis.
Think about justifying a text in word processor. Noramlly we write the text for left to right. Let’s assume this is as same as having a
row direction for our text content. When we click the left, center, right or justify alignment buttons on the toolbar, we can move the content in the row direction. This is what
justify-content means—How the content itself aligns in the main axis.
Once we know
justify-content is for the main axis, we know
align-items is for the other one.