CSS | align-self Property - Tutorialspoint.dev

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:

`

CSS | align-self Property

tags:

leave a comment

0 Comments

Subscribe to Our Newsletter

Top Followed books