HTML | DOM Style alignSelf Property

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:

Example-2: Using the stretch value.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:

Example-3: Using the center value.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:

Example-4: Using the flex-start value.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:

Example-5: Using the flex-end value.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:

Example-6: Using the baseline value.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:

Example-7: Using the initial value.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:
  • After clicking the button:

Example-8: Using the inherit value.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.