Skip to content
Related Articles

Related Articles

CSS | align-self Property
  • Last Updated : 06 Aug, 2019

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:




    <!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:




    <!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:




    <!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:

    flex-start: This property is used to align the selected item at the beginning of the flexible container.

  • Syntax:
    align-self: flex-start;
  • Example:




    <!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:




    <!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:




    <!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:




    <!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-

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :