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
Previous
CSS | word-break Property
Next

CSS | clear Property
Recommended Articles
Page :
HTML | DOM Style alignSelf Property
13, Feb 19
CSS | transition-property Property
31, Dec 18
How to override the CSS properties of a class using another CSS class ?
27, Sep 19
Difference between CSS Grid and CSS Flexbox
04, Mar 21
Which CSS framework is better Tailwind CSS or Bootstrap ?
28, Oct 21
How to use CSS in different dimension (CSS-in-JS) ?
29, Sep 21
CSS Cheat Sheet - A Basic Guide to CSS
28, Apr 22
CSS table-layout Property
17, Dec 18
CSS text-align Property
17, Dec 18
CSS | border-top-width Property
03, Jan 19
CSS | isolation Property
16, Jan 19
CSS | border-inline-start-style Property
26, Mar 20
CSS | column-rule-width Property
03, Jan 19
How unicode-bidi property is used in CSS ?
21, Apr 21
CSS | word-spacing Property
24, Dec 18
CSS | animation-delay Property
18, Dec 18
CSS | margin-top Property
03, Jan 19
CSS border-radius Property
13, Jul 18
CSS | grid Property
15, Jan 19
CSS | font-size-adjust Property
16, Jan 19
CSS | visibility Property
23, Oct 18
CSS | Display property
27, Aug 18
CSS | height Property
11, Jan 19
CSS | transform-origin Property
24, Jul 19
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
ManasChhabra2
@ManasChhabra2
Vote for difficulty
Current difficulty :
Basic





Improved By :
Article Tags :
Practice Tags :
Report Issue

We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!