CSS align-content property
Example
Pack lines toward the center of the flex container:
div {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
align-content: center;
}
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
align-content: center;
}
Definition and Usage
The align-content
property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines.
flex-wrap with value wrap will wrap the flex items to the next line.
align-content will align all the flex items group (flex lines) vertically.
Note: There must be multiple lines of items for this property to have any effect!
Tip: Use the justify-content property to align the items on the main-axis (horizontally).
Default value: | stretch |
---|---|
Inherited: | no |
Animatable: | no. |
Version: | CSS3 |
JavaScript syntax: | object.style.alignContent="center" |
- Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
- object - object in javascript means the element on which
align-content
is applied. - Animatable - "Animatable = no" means that it cannot be animated with CSS
@keyframes
.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- specify the first version that worked with a prefix.
Property | |||||
---|---|---|---|---|---|
align-content | 21.0 |
11.0 |
28.0 |
9.0 7.0 -webkit- |
12.1 |
CSS Syntax
align-content: stretch|center|flex-start|flex-end|space-between|space-around|space-evenly|initial|inherit;
Property Values
Value | Description | Demo |
---|---|---|
stretch | Default value. Lines stretch to take up the remaining space | |
center | Lines are packed toward the center of the flex container | |
flex-start | Lines are packed toward the start of the flex container | |
flex-end | Lines are packed toward the end of the flex container | |
space-between | Lines are evenly distributed in the flex container | |
space-around | Lines are evenly distributed in the flex container, with half-size spaces on either end | |
space-evenly | Lines are evenly distributed in the flex container, with equal space around them | |
initial | Sets this property to its default value. | |
inherit | Inherits this property from its parent element. |
Comments
Post a Comment