In this section, we will learn what the flex align-content property is and how to use it in CSS.

Click here to run the example of flex align-content proeprty.

Note: if you run the sample above in a Firefox browser and activate the “Flexbox Inspector tool” you’ll get a better perspective on how this property treats flex-lines. (Check “flexbox” section if you don’t know what the “Flexbox Inspector” is and how it works)

CSS flex align-content Property Definition and Usage

By default, the flex-lines sit next to each other from the start point of Cross-Axis toward the end of Cross-Axis and if the container had available space, that space will appear at the end of the Cross-Axis.

Of course this is the default behavior and CSS provided a property named `align-content` by which we can position flex-lines differently along the Cross-Axis of the container and so as a result, the available space along this axis (if any) will be spread differently than just appearing at the end point of the Cross-Axis.

Note: the `flex-wrap` property should be set to any value other than “nowrap” and there should be multiple rows along the Cross Axis in order to see the effect of this property.

CSS flex align-content Property Syntax

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

CSS flex align-content Property Value

The values that can be set for this property are:

• flex-start: this is the default value, and it makes the flex-lines to sit next to each other from the start point of the Cross-Axis toward the end of it. The remained space of the container will appear at the end of Cross-Axis. (unless there’s a margin for each flex-item, you won’t see any space between them)

• flex-end: this value is the opposite of “flex-start” value.

• center: using this value, the flex-lines will be placed at the center of the container along the Cross-Axis and any remained space of the container will appear evenly around the last and the first flex-lines. (unless there’s a margin for each flex-items, you won’t see any space between them)

• space-between: Using this value, the first flex-line will be positioned at the start point of the Cross-Axis and the last flex-line will be positioned at the end of the Cross-Axis. The remained space of the container will appear evenly between the rests of flex-lines.

• space-around: this value is similar to “space-between” but using this value also adds even space before and after the first and the last flex-lines.

• stretch: this is the default value and if used, all lines (rows) will stretch along the Cross-Axis to fill the remained space.

Example: align center with CSS

See the Pen align center with CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: CSS flex align-content flex-end

See the Pen CSS flex align-content flex-end by Enjoy Tutorials (@enjoytutorials) on CodePen.

Example: CSS flex align-content property space-around

See the Pen CSS flex align-content property space-around by Enjoy Tutorials (@enjoytutorials) on CodePen.