---
title: "CSS align-self Property Tutorial"
url: https://weworkworldwide.com/tutorials/css-align-self-property-tutorial-2/
description: "In this section, we will learn what the align-self property is and how to use it in CSS. Click here to run the first example. Click here to run the second"
date: 2026-05-30T13:00:27+00:00
source: https://weworkworldwide.com/llms.txt
---
# CSS align-self Property Tutorial
In this section, we will learn what the align-self property is and how to use it in CSS.
Click here to run the first example.
Click here to run the second example.
## CSS align-self Property Definition and Usage
By default, if the height of a flex-item wasn’t explicitly set, it will stretch along *Cross-Axis* of the Flex-container and fills the entire space of its ***flex-line***.
But CSS provided a property named `align-self` by which we can control the positioning of *individual flex-items* along the Cross-Axis, as well.
## CSS align-self Property Syntax
``` line-numbers
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
```
## CSS align-self Property Value
The values we can set for `align-self` property are:
``` line-numbers
```
- **auto**: this is the default value and it will
follow the value set for `*align-items` property*.
- **flex-start**: using this value the target
flex-item will be positioned as close as its flex-line allows to the
start-point of the container’s Cross Axis.
- **flex-end**: using this value the target flex-item
will be positioned as close as its flex-line allows to the end-point of
the container’s Cross Axis.
- **center**: using this value the target flex-item
will be positioned on the center of its flex-line.
- **baseline**: using this value the target flex-item
will be positioned in a way that its baseline aligns with other
participant flex-items within related flex-line.
- **stretch**: using this value, it makes the target
flex-item to stretch along Cross-Axis of the container.
## Example: flexbox align self
``` line-numbers
CSS is fun :)
center
flex-end
flex-start
baseline
stretch
auto
```