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.
Leave a Reply