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
Last Updated :
21 Jul, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...