align-items
The align-items property aligns flex or grid items along the cross axis of their container.
Syntax
align-items: stretch | flex-start | center | baseline | end;
Examples
.card {
display: flex;
align-items: center;
gap: 0.75rem;
}
Output
Vertically centers all children within the flex row regardless of their differing heights.
Notes
Default is stretch (children fill the cross axis if no fixed size). It is the cross-axis counterpart of justify-content. Override per item with align-self. baseline aligns text baselines.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 29 |
| firefox | 28 |
| safari | 9.0 |
| edge | 12 |