CSS align-self
The align-self property in CSS allows you to override the align-items value for individual flex items. This property specifies how a single flex item is aligned on the cross-axis, relative to the container.
Syntax of align-self
</>
Copy
align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;Values
| Value | Description |
|---|---|
auto | Uses the value of align-items from the container. This is the default value. |
stretch | The item is stretched to fill the container (on the cross-axis). |
center | The item is centered along the cross-axis. |
flex-start | The item is aligned at the start of the cross-axis. |
flex-end | The item is aligned at the end of the cross-axis. |
baseline | The item is aligned so that its baseline aligns with the baseline of its container. |
initial | Resets the property to its default value (auto). |
inherit | Inherits the value from the parent container. |
Default Value
auto
Examples for align-self
Using the CSS align-self Property
The following examples demonstrate how the align-self property can be applied to override the align-items property for specific flex items.
</>
Copy
/* Align specific item(s) to flex-start */
.box.special {
align-self: flex-start;
}
/* Align specific item(s) to center */
.box.special {
align-self: center;
}
/* Align specific item(s) to flex-end */
.box.special {
align-self: flex-end;
}Similarly, you can use other values for align-self property specified in the syntax.
Example 1. align-self: flex-end;
The following example shows how align-self is used to adjust the alignment of individual items in a flex container.
index.html
</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
width: 400px;
height: 200px;
display: flex;
align-items: center;
border: 2px solid black;
}
.box {
flex: 0 0 30%;
height: 50px;
background-color: red;
margin: 5px;
text-align: center;
line-height: 50px;
}
.box.special {
align-self: flex-end;
}
</style>
</head>
<body>
<h1>CSS align-self Property JavaScript Example</h1>
<div class="container">
<div class="box">1</div>
<div class="box special">2</div>
<div class="box">3</div>
</div>
</body>
</html>
Example 2. align-self: flex-start;
</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
width: 400px;
height: 200px;
display: flex;
align-items: center;
border: 2px solid black;
}
.box {
flex: 0 0 30%;
height: 50px;
background-color: red;
margin: 5px;
text-align: center;
line-height: 50px;
}
.box.special {
align-self: flex-start;
}
</style>
</head>
<body>
<h1>CSS align-self Property JavaScript Example</h1>
<div class="container">
<div class="box">1</div>
<div class="box special">2</div>
<div class="box">3</div>
</div>
</body>
</html>
Browser Support
The align-self property is supported in most modern browsers. Below is a compatibility table:
| Browser | Version |
|---|---|
| Chrome | 57.0 |
| Edge | 16.0 |
| Firefox | 52.0 |
| Safari | 10.1 |
| Opera | 44.0 |