CSS align-items Property
Example
Center-align the various <div> elements in a flexbox:
div {
display: flex;
align-items: center;
}
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers following -webkit-, -ms-, or -moz- indicate the first version that supports the prefixed property.
| Property | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| align-items | 21.0 | 11.0 | 20.0 | 9.0 <br>7.0 -webkit- | 12.1 |
Definition and Usage
The align-items property defines the default alignment for flex items along the cross-axis (vertical axis) of the current line in the flex container.
Tip: Use the align-self property of each flex item to override the align-items property.
| Default value: | stretch |
|---|---|
| Inherited: | no |
| Animatable: | no. See animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.alignItems="center" Try it |
CSS Syntax
Property Values
| Value | Description | Test |
|---|---|---|
| stretch | Default. Elements are stretched to fit the container. If the cross-axis dimension property is 'auto', it will make the margin box as large as possible within the line while respecting the 'min/max-width/height' constraints. | Test » |
| center | Elements are centered within the container. Flex items are centered along the cross-axis of the line (if the line's size is less than the flex item's size, it will overflow equally in both directions). | Test » |
| flex-start | Elements are aligned at the start of the container. The cross-axis start edge of the flex item is aligned with the start edge of the line. | Test » |
| flex-end | Elements are aligned at the end of the container. The cross-axis start edge of the flex item is aligned with the end edge of the line. | Test » |
| baseline | Elements are aligned along the baseline of the container. If the flex item's inline axis is the same as the cross axis, this value is identical to 'flex-start'. Otherwise, it participates in baseline alignment. | Test » |
| initial | Sets this property to its default value. See initial | Test » |
| inherit | Inherits this property from its parent element. See inherit |
Related Articles
CSS Reference Manual: align-content Property
CSS Reference Manual: align-self Property