---
title: "CSS flex align-content Property Tutorial"
url: https://weworkworldwide.com/tutorials/css-flex-align-content-property-tutorial/
description: "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 proepr"
date: 2026-04-23T06:31:36+00:00
source: https://weworkworldwide.com/llms.txt
---
# CSS flex align-content Property Tutorial
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.
``` line-numbers
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
``` line-numbers
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-items, you won’t see any space between them)
``` line-numbers
```
- **flex-end**: this value is the opposite of
“flex-start” value.
``` line-numbers
```
- **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)
``` line-numbers
```
- **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.
``` line-numbers
```
- **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.
``` line-numbers
```
- **stretch**: this is the default value and if used,
all lines (rows) will stretch along the Cross-Axis to fill the remained
space.
``` line-numbers
```
## Example: align center with CSS
``` line-numbers
CSS is fun :)
Center
Item One
Item Two
Item Three
Item Four
Item Five
```
## Example: CSS flex align-content flex-end
``` line-numbers
CSS is fun :)
Center
Item One
Item Two
Item Three
Item Four
Item Five
```
## Example: CSS flex align-content property space-around
``` line-numbers
CSS is fun :)
Center
Item One
Item Two
Item Three
Item Four
Item Five
```