CSS3 align-content Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The align-content CSS property aligns the flexible container's items within the flex container when there is extra space on the cross-axis (vertically).
This property has no effect on single line flexible boxes. Moreover you can use the CSS justify-content property to align the items on the main-axis (horizontally).
The following table summarizes the usages context and the version history of this property.
| Default value: | stretch |
|---|---|
| Applies to: | Multi-line 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-content property in action.
Example
Try this code ».flex-container {
/* Safari */
display: -webkit-flex;
-webkit-flex-flow: row wrap;
-webkit-align-content: space-around;
/* Standard syntax */
display: flex;
flex-flow: row wrap;
align-content: space-around;
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
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. |
space-between |
Items are evenly distributed in the flex container in such a way that the space between two adjacent items is same. |
space-around |
Items are evenly distributed in the flex container so that the spaces around (i.e. before, between, and after) every item are same. |
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-content property. |
Browser Compatibility
The align-content property is supported in all major modern browsers.
 |
Basic Support—
|
Note: Apple Safari version 7 and above supports the align-content property but require -webkit- prefix, like this -webkit-align-content: center;
Further Reading
See tutorial on: CSS Alignment.
Related properties: 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.
