---
title: "CSS flex align-items Property Tutorial"
url: https://weworkworldwide.com/tutorials/css-flex-align-items-property-tutorial/
description: "In this section, we will learn what the flex align-items property is and how to use it in CSS. Click here to run the first example. Click here to run the s"
date: 2026-05-13T06:32:25+00:00
source: https://weworkworldwide.com/llms.txt
---
# CSS flex align-items Property Tutorial
In this section, we will learn what the flex align-items property is and how to use it in CSS.
Click here to run the first example.
Click here to run the second example.
## CSS flex align-items Property Definition and Usage
By default, if we don’t set the height of flex-items, they will stretch along *Cross-Axis* of the Flex-container and fill the entire space of their ***flex-line***.
But CSS provided a property named `align-items` by which we can control the positioning of *flex-items* altogether along Cross-Axis of their container.
## CSS flex align-items Property Syntax
``` line-numbers
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
```
## CSS flex align-items Property Value
The values we can set for `align-items` property are:
``` line-numbers
```
- **flex-start**: using this value, flex-items will be
positioned as close as their flex-line allows, to the start-point of the
container’s Cross Axis.
- **flex-end**: using this value, flex-items will be
positioned as close as their flex-line allows to the end-point of the
container’s Cross Axis.
- **center**: using this value, flex-items will be
positioned on the center of their flex-line.
- **baseline**: using this value, flex-items will be
positioned in a way that their baseline aligns with each other.
Note: flex-items within each flex-line have their own baseline.
- **stretch**: using this value, it makes flex-items
to stretch along Cross-Axis of the container until they fill the entire
space of their **flex-line**. This is the default
value.
## Example: flexbox align items
``` line-numbers
CSS is fun :)
Center
Item One
Item Two
Item Three
Item Four
Item Five
```
## Example: align items center
``` line-numbers
CSS is fun :)
Center
Item One
Item Two
Item Three
Item Four
Item Five
```