CSS align-items Property
The align-items property specifies the alignment of items within the flexible container or the specified window. It synchronizes the Flex Items throughout the axis. To override the align-items property, use the align-self property.
Tips: To override the align-items property, use the align-self property of each item.
Syntax
Property Values
| Value | Description |
|---|---|
| stretch | The default setting. Lines expand to fill the remaining space. |
| center | Lines are packed in the flex container's center. |
| flex-start | Lines are packed at the beginning of the flex container. |
| flex-end | Lines are packed at the end of the flex container. |
| baseline | Items will be positioned along the container's baseline. |
| initial | Returns the value of this property to its default value. |
Supported Browsers
| Element | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| align-items | 21.0 | 20.0 | 9.0 | 11.0 | 12.1 |