flex-direction
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.
.container{
flex-direction: row; /* Align from left to right. */
}
.container{
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.