The CSS “justify content” and “align items” are one of the sub-properties of Flexible Box Layout module. Although they are commonly used in styling HTML document, their uses cases are mostly misunderstood. For the sake of clarity, justify content defines how the browser distributes space between and around content items along the main axis of a flex container, whereas align items distribute content items along the cross axis of a flex container.

But what does main axis or cross axis mean? The main axis refers to the direction set by the flexbox property. Direction may either be column-wise or row-wise. Should you choose a row then the direction will run on the horizontal axis.

But when you choose column, the direction will run on the vertical axis – from top to bottom – of the page.

For align items, the flexbox runs perpendicular to the main axis, therefore if your flex container is row, the direction will be on the vertical axis. But if the flex container is column, the direction will be on the horizontal axis.

In order to align the flex container at the cross axis or to be perpendicular to the main axis, we use align items CSS property.

I hope you found this article enlightening, be on the look out for more in series. Thanks.