Skip to content
Related Articles

Related Articles

CSS | align-self Property

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Basic
  • Last Updated : 14 Jun, 2022

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|stretch|center|flex-start|flex-end|baseline|
initial;

Property values: auto: This property is used to inherits 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 21.0
  • Internet Explorer 11.0
  • Firefox 28.0
  • Opera 12.1
  • Safari 9.0, 7.0 -webkit-


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!