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.