Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM Style alignSelf Property
  • Last Updated : 29 Jul, 2019

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.

Example-1: Using the auto value.




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




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




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




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




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




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




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




<!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 21.0
  • Internet Explorer 11.0
  • Firefox 20.0
  • Opera 12.1
  • Safari 7.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :