Align Items
Align flex items along the cross axis.
Syntax
align-items: center;The align-items property aligns items along the cross axis (perpendicular to the main axis):
stretch— fill the container height (default).flex-start/flex-end— top or bottom.center— vertically center.baseline— align text baselines.
Combining justify-content: center and align-items: center perfectly centers content both ways.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer uses align-items: center on a card header flex row to vertically align an icon and title text regardless of their different heights.
- A designer uses align-items: flex-start in a comment section so user avatars pin to the top of the comment box, not its vertical center.
- A developer uses align-items: stretch on a row of feature panels to make all panels the same height without setting explicit heights.
More examples
Center align icon with text
Vertically centers a variable-height icon alongside its text label in each list item row.
.list-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid #eee;
}flex-start for top-aligned avatars
Pins the avatar to the top of a potentially long comment body using align-items: flex-start.
.comment {
display: flex;
align-items: flex-start;
gap: 16px;
}
.comment .avatar {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
}stretch for equal-height cards
The default stretch value makes all cards grow to the height of the tallest sibling, creating an even row.
.card-row {
display: flex;
align-items: stretch; /* default */
gap: 24px;
}
.card {
flex: 1;
display: flex;
flex-direction: column;
padding: 24px;
background: #fff;
}
Discussion