CSS 'align-content' Property Explained

The CSS 'align-content' property is used in flexbox and grid layouts to control the alignment of flex or grid rows within the container when there is extra space along the cross-axis. In simpler terms, if a flexbox or grid container is taller than its items' total height, align-content determines how these rows of items are spaced out vertically.

CSS 'align-content' Property Examples

See the Pen CSS align-content Property by Webzstore (@webzstore) on CodePen.

The 'align-content' property gives you fine control over the alignment and spacing of rows in flexible and grid layouts, making it easier to create responsive and aesthetically pleasing designs.

Browser Support For 'align-content' Property

52.0	10.1	57.0	16.0	44.0

CSS Syntax of the 'align-content' Property

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

Usage of the 'align-content' Property

This property is useful when working with multi-row flex or grid containers, and you want to specify how rows are aligned in the container when extra space is available. It allows you to add space around items, spread them out evenly, or align them to one side of the container, among other options.

Property Values of the 'align-content' Property

• 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 at the start of the flex container.
• Flex-end: Lines are packed at the end of the flex container.
• Space-between: Lines display with equal spacing between them.
• Space-around: Lines display with equal spacing around them.
• Space-evenly: Lines display with equal spacing around and between them.
• Initial: Sets this property to its default value (stretch).
• Inherit: Inherits this property from its parent element.

Ryan Parker

Ryan has been a standout in digital marketing since 2010. He's the go-to person for getting businesses noticed online, with over 300 projects under his belt—these range from helping local business owners to big online stores. As the Head of Digital Marketing at Webzstore Solutions, Ryan knows all the tricks to make companies shine on the internet. He's excellent at using the latest tech and smart strategies to get results. Ryan is all about making businesses grow and reach more people online.

All Posts Website