The align-self property in CSS is used to align the selected items in the flexible container in many different manners such as flex-end, center, flex-start, etc.
Syntax:
align-self: auto|normal|self-start|self-end|stretch|center
|baseline, first baseline, last baseline|flex-start
|flex-end|baseline|safe|unsafe;
Property values: auto: This property is used to inherit its parent container align-items property or stretched if it has no parent container. It is a default value.
Syntax:
align-self: auto;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | align-self Property
</title>
<style>
#geeks {
width: 250px;
height: 200px;
border: 4px solid black;
display: -webkit-flex;
-webkit-align-items: flex-start;
display: flex;
align-items: flex-start;
}
#geeks div {
-webkit-flex: 2;
flex: 1;
}
#sudo {
-webkit-align-self: auto;
align-self: auto;
}
</style>
</head>
<body>
<center>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3 style="color:green;">
align-self:auto;
</h3>
<div id="geeks">
<div style="background-color:green;color:white;">
Geeks
</div>
<div style="background-color:lightblue;"
id="sudo">
For
</div>
<div style="background-color:coral;">
Geeks
</div>
<div style="background-color:lightblue;">
Sudo
</div>
<div style="background-color:tomato;">
Placement
</div>
</div>
</center>
</body>
</html>
Output:
position
stretch: This property is used to position the elements to fit the container.
Syntax:
align-self: stretch;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | align-self Property
</title>
<style>
#geeks {
width: 250px;
height: 200px;
border: 4px solid black;
display: -webkit-flex;
-webkit-align-items: flex-start;
display: flex;
align-items: flex-start;
}
#geeks div {
-webkit-flex: 2;
flex: 1;
}
#sudo {
-webkit-align-self: stretch;
align-self: stretch;
}
</style>
</head>
<body>
<center>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3 style="color:green;">
align-self:stretch;
</h3>
<div id="geeks">
<div style="background-color:green;color:white;">
Geeks</div>
<div style="background-color:lightblue;"
id="sudo">
For
</div>
<div style="background-color:coral;">
Geeks
</div>
<div style="background-color:lightblue;">
Sudo
</div>
<div style="background-color:tomato;">
Placement
</div>
</div>
</center>
</body>
</html>
Output:
Center: This Property is used to place the item at the center of the flexible container.
Syntax:
align-self: center;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | align-self Property
</title>
<style>
#geeks {
width: 250px;
height: 200px;
border: 4px solid black;
display: -webkit-flex;
-webkit-align-items: flex-start;
display: flex;
align-items: flex-start;
}
#geeks div {
-webkit-flex: 1;
flex: 1;
}
#sudo {
-webkit-align-self: center;
align-self: center;
}
</style>
</head>
<body>
<center>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3 style="color:green;">
align-self:center;
</h3>
<div id="geeks">
<div style="background-color:green;color:white;">
Geeks
</div>
<div style="background-color:lightblue;"
id="sudo">
For
</div>
<div style="background-color:coral;">
Geeks
</div>
<div style="background-color:lightblue;">
Sudo
</div>
<div style="background-color:tomato;">
Placement
</div>
</div>
</center>
</body>
</html>
Output:
Syntax:
align-self: flex-start;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | align-self Property
</title>
<style>
#geeks {
width: 250px;
height: 200px;
border: 4px solid black;
display: -webkit-flex;
-webkit-align-items: flex-start;
display: flex;
align-items: flex-start;
}
#geeks div {
-webkit-flex: 1;
flex: 1;
}
#sudo {
-webkit-align-self: flex-start;
align-self: flex-start;
}
</style>
</head>
<body>
<center>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3 style="color:green;">
align-self:flex-start;
</h3>
<div id="geeks">
<div style="background-color:green;color:white;">
Geeks
</div>
<div style="background-color:lightblue;"
id="sudo">
For
</div>
<div style="background-color:coral;">
Geeks
</div>
<div style="background-color:lightblue;">
Sudo
</div>
<div style="background-color:tomato;">
Placement
</div>
</div>
</center>
</body>
</html>
Output:
flex-end: This Property is used to position the selected item at the end of the flexible container.
Syntax:
align-self: flex-end;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | align-self Property
</title>
<style>
#geeks {
width: 250px;
height: 200px;
border: 4px solid black;
display: -webkit-flex;
-webkit-align-items: flex-start;
display: flex;
align-items: flex-start;
}
#geeks div {
-webkit-flex: 1;
flex: 1;
}
#sudo {
-webkit-align-self: flex-end;
align-self: flex-end;
}
</style>
</head>
<body>
<center>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3 style="color:green;">
align-self:flex-end;
</h3>
<div id="geeks">
<div style="background-color:green;color:white;">
Geeks
</div>
<div style="background-color:lightblue;"
id="sudo">
For
</div>
<div style="background-color:coral;">
Geeks
</div>
<div style="background-color:lightblue;">
Sudo
</div>
<div style="background-color:tomato;">
Placement
</div>
</div>
</center>
</body>
</html>
Output:
Baseline: The item is placed at the baseline of the flexible container.
Syntax:
align-self: baseline;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | align-self Property
</title>
<style>
#geeks {
width: 250px;
height: 200px;
border: 4px solid black;
display: -webkit-flex;
/* Safari */
-webkit-align-items: center;
/* Safari 7.0+ */
display: flex;
align-items: center;
}
#geeks div {
-webkit-flex: 1;
/* Safari 6.1+ */
flex: 1;
}
#sudo {
-webkit-align-self: baseline;
/* Safari 7.0+ */
align-self: baseline;
}
</style>
</head>
<body>
<center>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3 style="color:green;">
align-self:baseline;
</h3>
<div id="geeks">
<div style="background-color:green;color:white;">
Geeks
</div>
<div style="background-color:lightblue;"
id="sudo">
For
</div>
<div style="background-color:coral;">
Geeks
</div>
<div style="background-color:lightblue;">
Sudo
</div>
<div style="background-color:tomato;">
Placement
</div>
</div>
</center>
</body>
</html>
Output:
initial: It sets the property to its normal position. It is the default value.
Syntax:
align-self: initial;
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS | align-self Property
</title>
<style>
#geeks {
width: 250px;
height: 200px;
border: 4px solid black;
display: -webkit-flex;
/* Safari */
-webkit-align-items: flex-start;
/* Safari 7.0+ */
display: flex;
align-items: flex-start;
}
#geeks div {
-webkit-flex: 1;
/* Safari 6.1+ */
flex: 1;
}
#sudo {
-webkit-align-self: initial;
/* Safari 7.0+ */
align-self: initial;
}
</style>
</head>
<body>
<center>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3 style="color:green;">
align-self:initial;
</h3>
<div id="geeks">
<div style="background-color:green;color:white;">
Geeks
</div>
<div style="background-color:lightblue;"
id="sudo">
For
</div>
<div style="background-color:coral;">
Geeks
</div>
<div style="background-color:lightblue;">
Sudo
</div>
<div style="background-color:tomato;">
Placement
</div>
</div>
</center>
</body>
</html>
Output:
Supported browsers: The browser supported by CSS | align-self Property are listed below:
- Google Chrome
- Edge
- Firefox
- Opera
- Safari