Cross Axis Alignment Property
Last updated: 2026-09-13
align-items Cross Axis Alignment Property
The align-items property sets the alignment of all flex items on the cross axis, controlling their position in the direction perpendicular to the main axis. Its default value is stretch, which makes the items stretch to fill the container height along the cross axis. The property is commonly used for vertical centering, top alignment, bottom alignment and baseline alignment.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | No |
| Applies To | all |
| Animation Type | discrete |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
align-items: normal | stretch | center | start | end | self-start | self-end | flex-start | flex-end | baseline;⚙️ Values
| Value | Type | Description |
|---|---|---|
normal | stretch | flex-start | flex-end | center | baseline | Keyword | Cross axis alignment |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| align-items | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Supported in all major browsers | |||||
Tip： Pairing justify-content: center with align-items: center centers flex items both horizontally and vertically - one of the most common centering recipes in flexbox.
Warning： baseline aligns the items on their text baselines, which is useful when font sizes differ. If an item has no text content, its bottom edge is treated as the baseline, which can produce unexpected results.
❓ FAQ
QWhat is the difference between align-items and align-self?
Aalign-items is set on the flex container and gives every child the same cross-axis alignment. align-self is set on a single flex item and overrides the container’s default for that item only, which is exactly what you need when one item should stand out while the rest keep the container’s alignment. align-self always has higher priority than align-items. The pair justify-items and justify-self follows the same container-default versus per-item-override relationship.
QWhy doesn’t align-items: center vertically center my items?
Aalign-items works on the cross axis. If the container has no explicit height and its height is determined by the content, there is no leftover space on the cross axis, so the centering cannot be seen. One common trap: with the default align-items: stretch and no height on the container, centering appears to do nothing because the cross axis has no leftover space to work with. Give the container a defined height, for example height: 200px. To center on the main axis at the same time, add justify-content: center.
QWhy doesn’t align-items: stretch work?
Astretch only applies when the items have no explicit cross-axis size. With a row main axis, if an item sets height, stretch is overridden and the item renders at its own height. Likewise, if the container has no definite size on the cross axis, there is nothing to stretch into. To make stretch work, keep the items’ cross-axis size at auto and give the container a definite size in that direction.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Align Self
Overrides the cross-axis alignment of a single item
Main Axis Alignment
Controls how items align on the main axis
