CSS Properties CSS Tutorial WEB Technology

CSS align-content Property

The align-content Property modifies the behavior of the flex-wrap property. This is similar to align-items, but instead of aligning flex items, it aligns flex lines.

Note: This property must have multiple rows of items for any effect!

Tip: Use the justify-content property to align items on the main-axis (horizontally).

Default value: stretch
Inherited: no
Animatable: no.
Version: CSS3
JavaScript syntax: object.style.alignContent=”center”

CSS Syntax

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

Property Values

Value Description
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.
Like/Subscribe us for latest updates or newsletter:

Leave a Reply

Your email address will not be published. Required fields are marked *