CSS align-items Property
Example
#demo div {
flex: 1;
border: 1px solid black;
display: flex;
align-items: center;
}Red
Green
Blue
Meaning
The CSS align-items property sets the align-self value on all direct children as a group.
Values have no special handling and are merely referenced by align-self.
| Default value: | stretch |
| Inherited: | No |
| Animatable: | No |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
align-items: normal | stretch | baseline-position | [ overflow-position ? self-position] |inherit|initial|revert|revert-layer|unset;Browser Support
Status
Property Values
The following table describes the values of this property:
| Value | Description |
|---|---|
| auto | Behaves as normal if the box has no parent, or when determining the actual position of an absolutely positioned box. It behaves as the computed align-items value of the parent box (minus any legacy keywords) otherwise (including when determining the static position of an absolutely positioned box). |
| normal | Represents the “default” alignment for the layout mode. Its behavior depends on the layout mode, as described below. |
| stretch | This is default value. Items are stretched to fit the flex container. The free-space is divided equally between all the items. |
| baseline | Items are positioned at the baseline of the flex container.
Possible Values:
|
| center | Items are positioned at the center of the flex container. |
| flex-end | Items are positioned at the end of the flex container. |
| flex-start | Items are positioned at the beginning of the flex container. |
| start | The items are packed flush to each other toward the start edge of the alignment container in the appropriate axis. |
| end | The items are packed flush to each other toward the end edge of the alignment container in the appropriate axis. |
| self-start | The items are packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis. |
| self-end | The items are packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis. |
| safe | Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start. |
| unsafe | Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored. |
| initial | Sets this property to its default value. |
| inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
| revert | Reverts the cascaded value of the property from its current value to the value the property |
| revert-layer | Rollback styles to the ones specified in previous cascade layers. |
| unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
align-items: stretch;
}More Example
Example
.container {
display: flex;
align-items: center;
}1
2
3
4
5
6
Example
.grid-container {
display: grid;
grid-template: 120px 120px / auto auto auto;
align-items: center;
}