CSS align-items Property
The align-items property sets the align-self value on all direct children as a group along the cross axis of a flex or grid container.
Description & Usage
The align-items property controls alignment of flex or grid items along the cross axis (perpendicular to the main axis defined by flex-direction).
When flex-direction is row (default), align-items controls vertical alignment. When flex-direction is column, it controls horizontal alignment. The default value stretch causes items to fill the container height.
For individual item overrides, use the align-self property on specific child elements to break away from the group alignment set by align-items.
Property Specifications
| Property Feature | Specification |
|---|---|
| Category | Flexbox |
| Initial Value | stretch |
| Inherited | No (not inherited) |
| Applies To | Flex and Grid containers |
Syntax
align-items: stretch | flex-start | flex-end | center | baseline;Property Values
| Value | Description |
|---|---|
| stretch | Items stretch to fill container along cross axis (respecting min/max width/height). |
| center | Items are centered along cross axis. |
| flex-start | Items are aligned to start edge of cross axis. |
| flex-end | Items are aligned to end edge of cross axis. |
| baseline | Items are aligned such that their text baselines match. |
Code Examples
Perfect Vertical Centering
.hero {
display: flex;
align-items: center;
justify-content: center;
min-height: 80vh;
}
Centers content perfectly vertically and horizontally.