New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

#align-items

Defines how flexbox items are aligned according to the cross axis, within a line of a flexbox container.

align-items: flex-start;

The flexbox items are aligned at the start of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the top.

align-items: flex-end;

The flexbox items are aligned at the end of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the bottom.

align-items: center;

The flexbox items are aligned at the center of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will be centered vertically.

align-items: baseline;

The flexbox items are aligned at the baseline of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the baseline of their text align along a horizontal line.

align-items: stretch;

The flexbox items will stretch across the whole cross axis.

By default, the cross axis is vertical. This means the flexbox items will fill up the whole vertical space.