The align-items property aligns items along the cross axis of a flex or grid container. In a normal row, that means vertically. Pick a value below to see it live, or type your own.
align-items: stretch | flex-start | center | flex-end | baseline;
| Value | What it does |
|---|---|
stretch | Items grow to fill the container's height (default when items have no fixed height) |
flex-start | Items sit at the start of the cross axis (top in a row) |
center | Items are centered on the cross axis |
flex-end | Items sit at the end of the cross axis (bottom in a row) |
baseline | Items line up by the baseline of their first line of text, even with different font sizes |
In grid layouts you will also see start and end; they behave like flex-start and flex-end.
Flexbox has two axes. justify-content works along the main axis (horizontal in a row), while align-items works along the cross axis (vertical in a row). If you change to flex-direction: column, the axes swap and align-items controls horizontal alignment instead.
The most common use of all:
.container {
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
min-height: 100vh;
}
To align just one item differently from the rest, use align-self on that item.
The parent needs display: flex or display: grid, and it needs extra height for vertical alignment to be visible. Also check whether the items have their own align-self.
Set display: flex and align-items: center on the parent, and give the parent a height or min-height.
The initial value is normal, which behaves like stretch in flexbox and grid.