CSS align-items property
CSS reference manual
Definitions and usages
align-items: The alignment of the flex container is set.
Tip: Use the align-self property of each flex object element to override the align-items property.
| Default: | stretch |
|---|---|
| Inherited: | Whether |
| Animated: | Whether. See Animation . |
| Version: | CSS3 |
| JavaScript syntax: | object.style.alignItems="center" Give it a try |
CSS syntax
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
The property value
| value | describe | test |
|---|---|---|
| stretch | By default, tensile components are adapted to the container. | test " |
| center | The central element is in the container. | test " |
| flex-start | Location elements start at the beginning of the container. | test " |
| flex-end | Location elements at the end of the container. | test " |
| baseline | Location elements at baseline of the container. | test " |
| initial | Set to default.See initial 。 | test " |
| inherit | Inheriting this property from its parent element.See inherit 。 |
Center to align the elastic box's elements:
div
{
display: flex;
align-items:center;
}
{
display: flex;
align-items:center;
}
Try it out . . .
Browser support
The numbers in the table support the version number of the first browser for this property.
The number immediately after -webkit-, -ms - or -moz - is the first version that supports the prefix property.
| Property | |||||
|---|---|---|---|---|---|
| align-items | 21.0 | 11.0 | 20.0 |
9.0
7.0 -webkit- |
12.1 |
Related articles
CSS Reference Manual: align-content property
CSS Reference Manual: align-self property