CSS align-items

The align-items property in CSS is used to align flex items along the cross axis of their container. This property is used with flex containers to control the alignment of items when the items do not use all the available space on the cross axis.

The align-items property has the following possible values:

stretch: This is the default value. Items are stretched to fill the container along the cross axis.
center: Items are centered along the cross axis.
flex-start: Items are aligned to the start of the cross axis.
flex-end: Items are aligned to the end of the cross axis.
baseline: Items are aligned such as their baselines align.

Let's see some examples of how the align-items property works:

Result:

In this example, we have a flex container with two flex items. The align-items: center; property aligns the items along the center of the cross axis.

Result:

In this example, the align-items: flex-start; property aligns the items to the start of the cross axis.

Result:

Finally, in this example, the align-items: flex-end; property aligns the items to the end of the cross axis.