Contents
Definition of align-items
The CSS text-align property is used to specify alignment for items located in a flex container:
Example
.flexcontainer {
display: -webkit-flex; /* Safari */
-webkit-align-items: flex-start; /* Safari 7.0 and newer */
display: flex;
align-items: flex-start;
}Introduced in CSS3, align-items belongs to the Flexbox layout. It can be neither inherited nor animated.
Tip: using the align-self property would override align-items.
Syntax rules for align-items
The syntax for the CSS align-items property is simple – all you need to define is one of the available property values:
align-items: value;
Property values
| Value | Description |
|---|---|
| stretch | Default. Stretches the items to fit the container |
| center | Positions the items at the center of the container |
| flex-start | Positions the items at the beginning of the container |
| flex-end | Positions the items at the end of the container |
| baseline | Positions the items at the baseline of the container |
| initial | Returns the default value of the property. |
| inherit | Inherits the property from the parent element. |
Browser support
Chrome
29+
Edge
12+
Firefox
20+
IE
11+
Opera
12.1+
Safari
9+
Mobile browser support
Chrome
29+
Firefox
20+
Opera
12.1+
Safari
9+