90

Flexbox align-content property

The CSS3 Flexbox align-content property is used to modify the behavior of the flex-wrap property. It is just like align-items, but it aligns flex lines instead of flex items.

Its possible values are:

• stretch:It is the default value. It specifies lines stretch to take up the remaining space.
• flex-start:It specifies that lines are packed toward the start of the flex container.
• flex-end:It specifies that lines are packed toward the end of the flex container.
• center:It specifies that lines are packed toward the center of the flex container.
• space-between:It specifies that lines are evenly distributed in the flex container.
• space-around:It specifies that lines are evenly distributed in the flex container, with half-size spaces on either end.

Let’s take an example to see the result of using the center value.

See this example:

Test it Now