CSS align-items Property | CSS Ref
Example
Center the alignments for all the items of the flexible <div> element:
div {
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
Definition and Usage
The align-items property specifies the default alignment for items inside the flexible container.
Tip: Use the align-self property of each item to override the align-items property.
| Default value: | stretch |
|---|---|
| Inherited: | no |
| Animatable: | no. |
| Version: | CSS3 |
| JavaScript syntax: | object.style.alignItems=”center” Try it |
CSS Syntax
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
Property Values
| Value | Description | Examples |
|---|---|---|
| stretch | Default. Items are stretched to fit the container | div#main { display:flex; align-items:stretch; } |
| center | Items are positioned at the center of the container | div#main { display:flex; align-items:center; } |
| flex-start | Items are positioned at the beginning of the container | div#main { display:flex; align-items:stretch; } |
| flex-end | Items are positioned at the end of the container | div#main { display:flex; align-items:flex-end; } |
| baseline | Items are positioned at the baseline of the container | div#main { display:flex; align-items:baseline; } |
| initial | Sets this property to its default value. | div#main { display:flex; align-items:initial; } |
| inherit | Inherits this property from its parent element. | div#main { display:flex; align-items:inherit; } |
