Align Items

The align-items property aligns items along the cross axis.

stretch (Default)

Items stretch to fill the container:

All boxes stretch to the same height!

flex-start

Items align to the start of the cross axis:

flex-end

Items align to the end:

center

Items align to the center:

baseline

Items align by their text baseline:

Interactive Playground

Perfect Centering

Combine justify-content and align-items:

Practical: Icon with Text

Practical: Header Layout

align-self

Override alignment for a single item:

Exercise: Center Vertically

Center the content vertically in the container: