Skip to content
Related Articles

Related Articles

HTML | DOM Style alignSelf Property

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Aug, 2022

The DOM Style alignSelf property is used to set or return the alignment for a selected item inside a flexible container. 

Syntax:

  • To get the alignSelf Property
object.style.alignSelf
  • To set the alignSelf Property
object.style.alignSelf = "auto | stretch | center | flex-start |
flex-end | baseline | initial | inherit"

Property Values:

  • auto: The element inherits the parent container’s ‘align-items’ property or sets it to ‘stretch’ if it has no parent container. This is the default style.
  • stretch: This is used to stretch the item to fit the container.
  • center: This is used to center the item in the container.
  • flex-start: This is used to position the item at the beginning of the container
  • flex-end: This is used to position the item at the end of the container.
  • baseline: This is used to position the item at the baseline of the container.
  • initial: This is used to set this property to its default value.
  • inherit: This inherits the property from its parent.

Return Values: It returns a string value which representing the align-self property of an element.

Example-1: Using the auto value. 

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>DOM Style alignSelf Property
    </title>
    <style>
        .main {
            width: 200px;
            height: 150px;
            border: solid;
            display: flex;
            align-items: center;
        }
         
        #item {
            /* setting align-self to
             flex-end to observe the
            effect of the auto value */
            align-self: flex-end;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks
      </h1>
 
    <b>DOM Style alignSelf Property</b>
    <p>Click on the button to change the alignSelf
    property to 'auto'</p>
 
    <div class="main">
        <div style="background-color:green;">
            GFG1 </div>
        <div style="background-color:white;">
            GFG2 </div>
        <div id="item" style="background-color:green;">
            GFG3 </div>
        <div style="background-color:white;">
            GFG4 </div>
    </div>
 
    <button onclick="changePos()">
        Change alignSelf property</button>
 
    <script>
        function changePos() {
 
            elem = document.querySelector('#item');
 
            // Setting alignSelf to auto
            elem.style.alignSelf = 'auto';
        }
    </script>
</body>
 
</html>

Output:

  • Before clicking the button:

 

  • After clicking the button:

 

Example-2: Using the stretch value. 

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>DOM Style alignSelf Property
      </title>
    <style>
        .main {
            width: 200px;
            height: 150px;
            border: solid;
            display: flex;
            /* setting align-items to
              center to observe the
            effect of the strench value */
            align-items: center;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style alignSelf Property</b>
    <p>Click on the button to change the
      alignSelf property to 'stretch'</p>
   
    <div class="main">
        <div style="background-color:green;">
          GFG1 </div>
        <div style="background-color:white;">
          GFG2 </div>
        <div id="item"
             style="background-color:green;">
          GFG3 </div>
        <div style="background-color:white;">
          GFG4 </div>
    </div>
    <button onclick="changePos()">Change alignSelf property
      </button>
 
    <script>
        function changePos() {
            elem = document.querySelector('#item');
 
            // Setting alignSelf to stretch
            elem.style.alignSelf = 'stretch';
        }
    </script>
</body>
 
</html>

Output:

  • Before clicking the button:

 

  • After clicking the button:

 

Example-3: Using the center value. 

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>DOM Style alignSelf Property
      </title>
    <style>
        .main {
            width: 200px;
            height: 150px;
            border: solid;
            display: flex;
            /* setting align-items to
            center to observe the
            effect of the center value */
            align-items: stretch;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks
      </h1>
    <b>DOM Style alignSelf Property</b>
    <p>Click on the button to change the
      alignSelf property to 'center'</p>
   
    <div class="main">
        <div style="background-color:green;">
          GFG1 </div>
        <div style="background-color:white;">
          GFG2 </div>
        <div id="item"
             style="background-color:green;">
          GFG3 </div>
        <div style="background-color:white;">
          GFG4 </div>
    </div>
   
    <button onclick="changePos()">
      Change alignSelf property</button>
 
    <script>
        function changePos() {
            elem = document.querySelector('#item');
 
            // Setting alignSelf to center
            elem.style.alignSelf = 'center';
        }
    </script>
</body>
 
</html>

Output:

  • Before clicking the button:

 

  • After clicking the button:

 

Example-4: Using the flex-start value. 

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>DOM Style alignSelf Property
      </title>
    <style>
        .main {
            width: 200px;
            height: 150px;
            border: solid;
            display: flex;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks
      </h1>
    <b>DOM Style alignSelf Property</b>
    <p>Click on the button to change the
      alignSelf property to 'flex-start'</p>
   
    <div class="main">
        <div style="background-color:green;">
          GFG1 </div>
        <div style="background-color:white;">
          GFG2 </div>
        <div id="item"
             style="background-color:green;">
          GFG3 </div>
        <div style="background-color:white;">
          GFG4 </div>
    </div>
   
    <button onclick="changePos()">
      Change alignSelf property</button>
 
    <script>
        function changePos() {
            elem = document.querySelector('#item');
 
            // Setting alignSelf to flex-start
            elem.style.alignSelf = 'flex-start';
        }
    </script>
</body>
 
</html>

Output:

  • Before clicking the button: 

  • After clicking the button: 

Example-5: Using the flex-end value. 

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>DOM Style alignSelf Property
      </title>
    <style>
        .main {
            width: 200px;
            height: 150px;
            border: solid;
            display: flex;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks
      </h1>
    <b>DOM Style alignSelf Property</b>
    <p>Click on the button to change the
      alignSelf property to 'flex-end'</p>
   
    <div class="main">
        <div style="background-color:green;">
          GFG1 </div>
        <div style="background-color:white;">
          GFG2 </div>
        <div id="item"
             style="background-color:green;">
          GFG3 </div>
        <div style="background-color:white;">
          GFG4 </div>
    </div>
   
    <button onclick="changePos()">
      Change alignSelf property</button>
 
    <script>
        function changePos() {
            elem = document.querySelector('#item');
 
            // Setting alignSelf to flex-end
            elem.style.alignSelf = 'flex-end';
        }
    </script>
</body>
 
</html>

Output:

  • Before clicking the button:

 

  • After clicking the button: 

Example-6: Using the baseline value. 

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>DOM Style alignSelf Property</title>
    <style>
        .main {
            width: 200px;
            height: 150px;
            border: solid;
            display: flex;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks
      </h1>
    <b>DOM Style alignSelf Property</b>
    <p>Click on the button to change the
      alignSelf property to 'baseline'</p>
   
    <div class="main">
        <div style="background-color:green;">
          GFG1 </div>
        <div style="background-color:white;">
          GFG2 </div>
        <div id="item"
             style="background-color:green;">
          GFG3 </div>
        <div style="background-color:white;">
          GFG4 </div>
    </div>
   
    <button onclick="changePos()">
      Change alignSelf property</button>
 
    <script>
        function changePos() {
            elem = document.querySelector('#item');
 
            // Setting alignSelf to baseline
            elem.style.alignSelf = 'baseline';
        }
    </script>
</body>
 
</html>

Output:

  • Before clicking the button: 

  • After clicking the button: 

Example-7: Using the initial value. 

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>DOM Style alignSelf Property
      </title>
    <style>
        .main {
            width: 200px;
            height: 150px;
            border: solid;
            display: flex;
            align-items: center;
        }
         
        #item {
            /* setting align-self to
             flex-end to observe the
            effect of the initial value */
            align-self: flex-end;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks
      </h1>
    <b>DOM Style alignSelf Property</b>
    <p>Click on the button to change the
      alignSelf property to 'initial'</p>
   
    <div class="main">
        <div style="background-color:green;">
          GFG1 </div>
        <div style="background-color:white;">
          GFG2 </div>
        <div id="item"
             style="background-color:green;">
          GFG3 </div>
        <div style="background-color:white;">
          GFG4 </div>
    </div>
    <button onclick="changePos()">
      Change alignSelf property</button>
 
    <script>
        function changePos() {
            elem = document.querySelector('#item');
 
            // Setting alignSelf to initial
            elem.style.alignSelf = 'initial';
        }
    </script>
</body>
 
</html>

Output:

  • Before clicking the button:

 

  • After clicking the button: 

Example-8: Using the inherit value. 

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>DOM Style alignSelf Property
      </title>
    <style>
        .main {
            width: 200px;
            height: 150px;
            border: solid;
            display: flex;
            /* this itself is the
          parent of the item */
            align-items: center;
        }
         
        #item {
            /* setting align-self to
          flex-end to observe the
            effect of the inherit value */
            align-self: flex-end;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks
      </h1>
    <b>DOM Style alignSelf Property</b>
    <p>Click on the button to change the
      alignSelf property to 'inherit'</p>
   
    <div id="parent">
        <div class="main">
            <div style="background-color:green;">
              GFG1 </div>
            <div style="background-color:white;">
              GFG2 </div>
            <div id="item"
                 style="background-color:green;">
              GFG3 </div>
            <div style="background-color:white;">
              GFG4 </div>
        </div>
    </div>
 
    <button onclick="changePos()">
      Change alignSelf property</button>
 
    <script>
        function changePos() {
            elem = document.querySelector('#item');
 
            // Setting alignSelf to inherit
            elem.style.alignSelf = 'inherit';
        }
    </script>
</body>
 
</html>

Output:

  • Before clicking the button:

 

  • After clicking the button: 

Supported Browsers: The browser supported by alignSelf property are listed below:

  • Google Chrome 29.0 and above
  • Edge 12.0 and above
  • Internet Explorer 10.0 and above
  • Firefox 20.0 and above
  • Opera 12.1 and above
  • Safari 9.0 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!