Tutorialspoint.dev

CSS | align-self Property

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;

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.

Example:

<!DOCTYPE html>
<html>
    <head>
        <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.

Example:

<!DOCTYPE html>
<html>
    <head>
        <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.

Example:

<!DOCTYPE html>
<html>
    <head>
        <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.

Example:

<!DOCTYPE html>
<html>
    <head>
        <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.



Example:

<!DOCTYPE html>
<html>
    <head>
        <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.

Example:

<!DOCTYPE html>
<html>
    <head>
        <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.

Example:

<!DOCTYPE html>
<html>
    <head>
        <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:

`



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter