CSS3 align-items Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The align-items property specifies the default alignment for items within the flex container.
The following table summarizes the usages context and the version history of this property.
| Default value: | stretch |
|---|---|
| Applies to: | Flex containers |
| Inherited: | No |
| Animatable: | No. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the align-items property in action.
Example
Try this code ».flex-container {
/* Safari */
display: -webkit-flex;
-webkit-align-items: center;
/* Standard syntax */
display: flex;
align-items: center;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
baseline |
Items are positioned at the baseline of the flex container. |
center |
Items are positioned at the center of the flex container. |
flex-start |
Items are positioned at the beginning of the flex container. |
flex-end |
Items are positioned at the end of the flex container. |
stretch |
Items are stretched to fit the flex container. The free-space is divided equally between all the items. This is default value. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element align-items property. |
Browser Compatibility
The align-items property is supported in all major modern browsers.
 |
Basic Support—
|
Note: Apple Safari version 7 and above supports the align-items property but require -webkit- prefix, like this -webkit-align-items: center;
Further Reading
See tutorial on: CSS Alignment.
Related properties: align-content, align-items, align-self, display, flex, flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink, flex-wrap, justify-content, min-height, min-width, order.
