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-contentis 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