description & Usage
The align-content property determines how the flex-lines are distributed along an axis.
There are 2 modes in flex boxes:
The main axis is horizontal.
The cross axis is vertical.
Informations
| # | Description |
|---|---|
| Default Value | stretch |
| Inherited | no |
| Animatable | no |
| Version | CSS3 |
| JavaScript syntax | object.style.alignContent="center" |
Browser compatibility and Support
The numbers inserted in the browser fields indicate the version that supports the align-content property.
| # | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| align-content |
Syntax
Values
| Values | Description |
|---|---|
| stretch | It makes the lines stretched and occupies the empty space. |
| center | Packs lines towards the center of the flex enclosure. |
| flex-start | Wraps lines to the start section of the flex container. |
| flex-end | Wraps the lines towards the end of the flex housing. |
| space-between | Draws lines evenly in the flex box. |
| space-around | Draws lines equally with short distances on both sides of the flex housing. |
| space-evenly | Draws lines equally spaced on both sides of the flex box. |
| initial | Sets the lines to default. |
| inherit | The line settings property inherits from its unit tag. |
Related Pages
CSS tutorial: CSS flexbox
CSS tutorial: CSS grid
CSS Reference: align-items property
CSS Reference: align-self property
CSS Reference: justify-content property
HTML DOM reference: alignContent property
