Example
Center align the various <div> elements of the flexbox:
- div
- {
- display: flex;
- align-items:center;
- }
复制
Browser support
The numbers in the table represent the version number of the first browser to support the property.
The number immediately following -webkit-, -ms- or -moz- is the first version that supports the prefixed property.
Attributes| align-items | 21.0 | 11.0 | 20.0 | 9.0 7.0 -webkit- |
12.1 |
Definition and Usage
The align-items property defines the alignment of flex children in the side (vertical) direction of the current row of the flex container.
Tip: Use the align-self property of each flex object element to override the align-items property.
Default: Inherit: Animatable: Version: JavaScript Syntax:| stretch |
| no |
| no. See CSS3 Animation Properties , CSS3 Animation Examples . |
| CSS3 |
| object.style.alignItems ="center" effect preview |
CSS syntax
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
attribute value
Value Description Test| stretch | Defaults. Items are stretched to fit the container. | Effect preview |
| center | The item is in the center of the container. | Effect preview |
| flex-start | The item is at the beginning of the container. | Effect preview |
| flex-end | Items are at the end of the container. | Effect preview |
| baseline | Items are on the container's baseline. | Effect preview |
| initial | Set this property to its default value. See initial . | Effect preview |
| inherit | This property is inherited from the parent element. See inherit . |