CSS align-itemsProperty
Example
Center-align the <div> elements in the flex container:
Try it Yourself »
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -ms-, or -moz- specify the first version that worked with a prefix.
| Property | |||||
|---|---|---|---|---|---|
| align-items | 21.0 | 11.0 | 20.0 | 9.0 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:The align-items property can be overridden by using the align-self property on each flex item element.
| Default value: | stretch |
|---|---|
| Inherited: | no |
| Animatable: | No. SeeAnimatable。 |
| version: | CSS3 |
| JavaScript Syntax: | object.style.alignItems="center" Try it Yourself |
CSS Syntax
Property value
| Value | Description | Testing |
|---|---|---|
| stretch | Default value. Items are stretched to fit the container. If the cross size property is 'auto', its value makes the item's margin box size as close as possible to the line's size, while still respecting the 'min/max-width/height' constraints. |
Test » |
| center | The element is positioned at the center of the container. Flex items are centered on the cross axis (vertical axis) of the line. (If the line size is smaller than the flex item size, it will overflow in both directions by the same amount). |
Test » |
| flex-start | The element is positioned at the start of the container. The cross-start margin edge of the flex item is placed flush with the cross-start edge of the line. |
Test » |
| flex-end | The element is positioned at the end of the container. The cross-start margin edge of the flex item is placed flush with the cross-end edge of the line. |
Test » |
| baseline | The element is positioned on the baseline of the container. If the flex item's inline axis is the same as the cross axis, this value is equivalent to 'flex-start'. In other cases, it participates in baseline alignment. |
Test » |
| initial | Sets this property to its default value. Seeinitial。 | Test » |
| inherit | Inherits this property from the parent element. Seeinherit。 |
Related Articles
CSS Reference:align-content property
CSS Reference:align-self property
other extensions