CSS: align-items (flex cross axis)

align-items

• CSS property align-items is for Flexbox container.
• It is for aligning flexbox items along the cross axis.

align-items: stretch

default

1

2

3

1

2

3

4

5

6

align-items: baseline

like first-baseline.

1

2

3 some
thing

align-items: first baseline

• first baseline aligns the items according to the baseline of the first line of text inside them.
• It’s useful when you have flex items with different font sizes or multiple lines of text, and you want them to line up neatly based on their text baseline.

• first-baseline → Aligns all items based on the first line of text inside them.
• last-baseline → Aligns all items based on the last line of text inside them.

1

2

3 some
thing

align-items: last baseline

1

2

3 some
thing

align-items: flex-start

1

2

3 some
thing

align-items: flex-end

1

2

3

align-items: start

like flex-start but respect writing direction.

align-items: end

align-items: center

1

2

3

Less common values

align-items: self-start

effect right-to-left languages.

align-items: self-end

effect right-to-left languages.

align-items: normal

same as stretch but if the item has its own height or width set, or if it's a grid item, normal may fall back to start instead of stretching.

align-items: anchor-center

align-items: anchor-center is a special value introduced with CSS Anchor Positioning.

It aligns the flex/grid items (or absolutely positioned elements) to the center of their associated anchor element along the block axis (usually vertical).

This is very useful when you have an element positioned via anchor positioning (like a tooltip, popover, or floating panel) and you want it perfectly centered on its anchor.

In the case of anchor-positioned elements, aligns the items to the center of the associated anchor element in the block direction. See Centering on the anchor using anchor-center.

• CSS: Anchor Positioning

align-items: safe center

1

2

3 some
thing

align-items: unsafe center

1

2

3 some
thing

safe

Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start.

unsafe

Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.