CSS align-content Property
Example
#demo {
width: 100px;
height: 500px;
border: 1px solid;
display: flex;
flex-wrap: wrap;
align-content: center;
}
#demo div {
width: 100px;
height: 100px;
}Meaning:
The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.
The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
This property has no effect on a single-line flex container.
Only multi-line flex containers ever have free space in the cross-axis for lines to be aligned in, because in a single-line flex container the sole line automatically stretches to fill the space.
| Default value: | stretch |
| Inherited: | No |
| Animatable: | No |
| Version: | CSS3 |
| JavaScript syntax: | |
Standard Syntax
align-content:stretch|center|flex-end|flex-start|space-around|space-between|start|end|normal|baseline|space-evenly|safe|unsafe|inherit|initial|revert|revert-layer|unset;Browser Support
Status
Property Values
The following table describes the values of this property:
| Value | Description |
|---|---|
| stretch | This is default value. Items are stretched to fit the flex container. The free-space is divided equally between all the items. |
| 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. |
| space-around | Items are evenly distributed in the flex container so that the spaces around every item are same. |
| space-between | Items are evenly distributed in the flex container in such a way that the space between two adjacent items is same. |
| start | The items are packed flush to each other against the start edge of the alignment container in the cross axis. |
| end | The items are packed flush to each other against the end edge of the alignment container in the cross axis. |
| normal | The items are packed in their default position as if no align-content value was set. |
| baseline | Set with the corresponding baseline.
|
| space-evenly | The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items, the start edge and the first item, and the end edge and the last item, are all exactly the same. |
| 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-content: stretch;
}More Example
Example
.container {
display: flex;
flex-wrap: wrap;
align-content: center;
}