Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

CSS | align-self Property

Improve Article
Save Article
Like Article
author
ManasChhabra2
scholar
1626 published articles
Improve Article
Save Article
Like Article

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:
 
stretch: This property is used to positioned 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 29.0 and above
  • Edge 12.0 and above
  • Internet Explorer 10.0 and above
  • Firefox 20.0 and above 
  • Opera 12.1 and above
  • Safari 9.0 and above

My Personal Notes
arrow_drop_up
Last Updated :
01 Aug, 2022
Like Article

Save Article

Similar Reads
1.
How to set align-self property to its default value in CSS ?
2.
Primer CSS Flexbox Align Self
3.
How to align-self element positioned at the baseline of the container ?
4.
Bulma Align Self
5.
Difference between align-content and align-items
6.
CSS place-self Property
7.
CSS justify-self Property
8.
CSS text-align Property
9.
CSS | align-content property
10.
CSS | text-align-last Property
Related Tutorials
1.
Onsen UI
2.
React Material UI
3.
NuxtJS
4.
D3.js
5.
Spectre CSS
Previous
CSS | word-break Property
Next

CSS | clear Property
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
ManasChhabra2
ManasChhabra2
Vote for difficulty
Current difficulty :
Basic





Improved By :
Article Tags :
Practice Tags :
Report Issue 
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox