What are justify-content and align-items in CSS Flexbox?

Overview

Flexbox is a modern CSS layout feature that allows us to arrange items in rows, columns, and in one dimension. To use it, we have to set a special display value on the parent element or container.

This will automatically arrange the children's elements in a row. However, we can change this behavior by setting a value using flex-direction: column. In this shot, we will learn more about two main properties of Flexbox:

• The justify-content property
• The align-items property

The justify-content property

The justify-content property controls where the flex items sit on the main (or x) axis. Let's see the available values.

• flex-start: This is the default value that aligns items at the start of the main axis.
• flex-end: This makes items sit at the end of the main axis.
• center: This makes the flex items sit at the center of the main axis.
• space-between: This distributes the remaining space between the flex items.
• space-around: This distributes the remaining space around the flex items.

The align-items property

The align-items property controls where the flex items sit on the cross (or y) axis. To control a single flex item instead of all, we can use the align-self property on it. Let's see the available values.

• stretch: This stretches flex items to fill the parent in the direction of the cross axis. This is a default value.
• baseline: This aligns the flex items at the baseline of the cross axis.
• center: This aligns the flex items at the center of the cross axis, and centers them vertically by default.
• flex-start: This aligns the flex items at the start of the cross axis, and aligns them vertically by default.
• flex-end: This aligns the flex items at the end of the cross axis.

Note: The baseline is the line upon which most letters "sit" and below which the descenders extend.