The align-items property defines how the browser distributes space between and around flex items along the vertical axis of their container. Justify-content aligns items along the horizontal axis, align-items aligns items on the vertical axis.

flex-start: Items are positioned at the beginning of the container.

flex-end: Items are positioned at the end of the container.

center: Items are positioned at the center of the container.

stretch: Default. Items are stretched to fit the container.

baseline: Items are aligned such as their baselines align.

See the Pen Flexbox Align-Items by brandon ewoldt (@bewoldt) on CodePen.