align-items

align-items

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

The align-items property defines the default behavior for how items are laid out along the cross axis (perpendicular to the main axis).

align-items

You can think of align-items as the justify-content version for the cross-axis (perpendicular to the main-axis).

The align-items property accepts 5 different values:

• flex-start: cross-start margin edge of the items is placed on the cross-start line
• flex-end: cross-end margin edge of the items is placed on the cross-end line
• center: items are centered in the cross-axis
• baseline: items are aligned such as their baselines align
• stretch (default): stretch to fill the container (still respect min-width/max-width)

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.

See the Pen
align-items flex start by Mukesh Singh (@codecad)
on CodePen.


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.

See the Pen
align-items flex end by Mukesh Singh (@codecad)
on CodePen.

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.

See the Pen
align-items center by Mukesh Singh (@codecad)
on CodePen.

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.

See the Pen
align-items baseline by Mukesh Singh (@codecad)
on CodePen.

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.

See the Pen
align-items strecth by Mukesh Singh (@codecad)
on CodePen.

Browser Support

• (modern) means the recent syntax from the specification (e.g. display: flex;)
• (hybrid) means an odd unofficial syntax from 2011 (e.g. display: flexbox;)
• (old) means the old syntax from 2009 (e.g. display: box;)