The align-content property in Flexbox is used to control the alignment and distribution of flexible lines (when there are multiple) within a Flex container along the cross-axis. This property is effective only when the container has more than one line of flex items.

Values of align-content

1. stretch (default): The lines stretch to fill the container along the cross-axis.
2. flex-start: The lines align at the start of the container's cross-axis.
3. flex-end: The lines align at the end of the container's cross-axis.
4. center: The lines are centered along the container's cross-axis.
5. space-between: The lines are distributed with the maximum space possible between them.
6. space-around: The lines are distributed with equal space around them.
7. space-evenly: The lines are distributed with equal space between them and the edges of the container. (This property is more recent and might not be supported in all browsers.)

Usage of align-content

The align-content property is applied to the Flex container to control the alignment of its child element lines along the cross-axis. Here are examples of how you can use each of these values.

align-content: stretch

css

html

[Placeholder: Image showing flexible lines stretching to fill the container along the cross-axis]

align-content: flex-start

css

html

[Placeholder: Image showing flexible lines aligned at the start of the container along the cross-axis]

align-content: flex-end

css

html

[Placeholder: Image showing flexible lines aligned at the end of the container along the cross-axis]

align-content: center

css

html

[Placeholder: Image showing flexible lines centered in the container along the cross-axis]

align-content: space-between

css

html

[Placeholder: Image showing flexible lines with the maximum space possible between them]

align-content: space-around

css

html

[Placeholder: Image showing flexible lines with equal space around each line]

align-content: space-evenly

css

html

[Placeholder: Image showing flexible lines with equal space between and around them]

Complete Example

This example demonstrates how the align-content property affects the alignment of flexible lines within a container.

html

[Placeholder: Image showing the complete example with align-content: center applied, centering the flexible lines in the container]

Summary

• stretch: The lines stretch to fill the container along the cross-axis.
• flex-start: The lines align at the start of the cross-axis.
• flex-end: The lines align at the end of the cross-axis.
• center: The lines are centered along the cross-axis.
• space-between: Maximum space possible between the lines.
• space-around: Equal space around each line.
• space-evenly: Equal space between and around the lines.

Proper use of align-content allows you to manage the alignment and distribution of flexible lines when you have a container with multiple lines, thus optimizing the presentation of your flexible and responsive layouts.