Skip to main content

​
Overview

Align items utilities control where every child sits along the cross axis of the flex container. Use them to vertically align items in a row or horizontally align items in a column.
ClassCSS
.items-startalign-items: flex-start;
.items-centeralign-items: center;
.items-endalign-items: flex-end;
.items-stretchalign-items: stretch;
Responsive items-*--on-* variants are also shipped.

​
Start

.items-start aligns all children to the start of the cross axis. Items with different heights will share a common top edge.

​
Center

.items-center vertically centers all children within the container. This is the most common alignment for headers, navigation bars, and balanced rows.

​
End

.items-end aligns all children to the end of the cross axis. Items share a common bottom edge.

​
Stretch

.items-stretch makes every child fill the full cross-axis height of the container. This is the default flex behavior and is useful when cards or columns should match heights.

​
Best Practices

  • Use items-center for balanced rails, headers, and button rows.
  • Use items-stretch when every child should fill the shared cross-axis height.
  • Reach for self-* only when one child needs to break away from the group rule.

Align Self

Override one item without changing the whole row

Justify Content

Pair cross-axis and main-axis alignment together