Open In App

CSS align-self Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads