HTML | DOM Style alignItems Property

The DOM Style alignItems Property is used to set or return the default alignment of items in a flexible container.

Syntax:

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

Property Values:



  • stretch: This is used to stretch the items to fit the container. This is the default value.
  • center: This is used to center the items in the container.
  • flex-start: This is used to position the items at the beginning of the container.
  • flex-end: This is used to position the items at the end of the container.
  • baseline: This is used to position the items 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.

The values are explained using the following examples:

Example-1: Using the stretch value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>DOM Style alignItems Property</title>
    <style>
        .main {
            width: 200px;
            height: 150px;
            border: solid;
            display: flex;
  
            /* setting align-items to center to observe the
            effect of the stretch value */
            align-items: center;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style alignItems Property</b>
    <p>Click on the button to change the 
       alignItems property to 'stretch'</p>
    
    <div class="main">
        <div style="background-color:lightblue;"
          Item 1 </div>
        <div style="background-color:lightgreen;"
          Item 2 </div>
        <div style="background-color:lightsalmon;"
          Item 3 </div>
        <div style="background-color:lightyellow;"
          Item 4 </div>
    </div>
    
    <button onclick="changePos()">
      Change alignItems property
    </button>
  
    <script>
        function changePos() {
            elem = document.querySelector('.main');
  
            // Setting alignItems to stretch
            elem.style.alignItems = 'stretch';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before pressing the button:
  • After pressing the button:

Example-2: Using the center value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>DOM Style alignItems Property</title>
    <style>
        .main {
            width: 200px;
            height: 150px;
            border: solid;
            display: flex;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style alignItems Property</b>
    <p>Click on the button to change the 
        alignItems property to 'center'</p>
    
    <div class="main">
        <div style="background-color:lightblue;"
          Item 1 </div>
        <div style="background-color:lightgreen;"
          Item 2 </div>
        <div style="background-color:lightsalmon;"
          Item 3 </div>
        <div style="background-color:lightyellow;"
          Item 4 </div>
    </div>
    
    <button onclick="changePos()">
      Change alignItems property
    </button>
  
    <script>
        function changePos() {
            elem = document.querySelector('.main');
  
            // Setting alignItems to center
            elem.style.alignItems = 'center';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before pressing the button:
  • After pressing the button:

Example-3: Using the flex-start value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>DOM Style alignItems Property</title>
    <style>
        .main {
            width: 200px;
            height: 150px;
            border: solid;
            display: flex;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style alignItems Property</b>
    <p>Click on the button to change the 
       alignItems property to 'flex-start'</p>
    
    <div class="main">
        <div style="background-color:lightblue;"
          Item 1 </div>
        <div style="background-color:lightgreen;"
          Item 2 </div>
        <div style="background-color:lightsalmon;"
          Item 3 </div>
        <div style="background-color:lightyellow;"
          Item 4 </div>
    </div>
    
    <button onclick="changePos()">
      Change alignItems property
    </button>
  
    <script>
        function changePos() {
            elem = document.querySelector('.main');
  
            // Setting alignItems to flex-start
            elem.style.alignItems = 'flex-start';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before pressing the button:
    flex-start-before
  • After pressing the button:

Example-4: Using the flex-end value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>DOM Style alignItems Property</title>
    <style>
        .main {
            width: 200px;
            height: 150px;
            border: solid;
            display: flex;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style alignItems Property</b>
    <p>Click on the button to change the 
       alignItems property to 'flex-end'</p>
    
    <div class="main">
        <div style="background-color:lightblue;"
          Item 1 </div>
        <div style="background-color:lightgreen;"
          Item 2 </div>
        <div style="background-color:lightsalmon;"
          Item 3 </div>
        <div style="background-color:lightyellow;"
          Item 4 </div>
    </div>
    
    <button onclick="changePos()">
      Change alignItems property
    </button>
  
    <script>
        function changePos() {
            elem = document.querySelector('.main');
  
            // Setting alignItems to flex-end
            elem.style.alignItems = 'flex-end';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before pressing the button:
    flex-end-before
  • After pressing the button:

Example-5: Using the baseline value.


filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>DOM Style alignItems Property</title>
    <style>
        .main {
            width: 200px;
            height: 150px;
            border: solid;
            display: flex;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style alignItems Property</b>
    <p>Click on the button to change the 
      alignItems property to 'baseline'</p>
    
    <div class="main">
        <div style="background-color:lightblue;">
          Item 1 </div>
        <div style="background-color:lightgreen;">
          Item 2 </div>
        <div style="background-color:lightsalmon;">
          Item 3 </div>
        <div style="background-color:lightyellow;">
          Item 4 </div>
    </div>
    
    <button onclick="changePos()">
      Change alignItems property
    </button>
  
    <script>
        function changePos() {
            elem = document.querySelector('.main');
  
            // Setting alignItems to baseline
            elem.style.alignItems = 'baseline';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before pressing the button:
    baseline-before
  • After pressing the button:

Example-6: Using the initial value. This sets the property to the default value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>DOM Style alignItems Property</title>
    <style>
        .main {
            width: 200px;
            height: 150px;
            border: solid;
            display: flex;
            /* setting align-items to center 
             to observe the effect of the 
             initial value */
            align-items: center;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style alignItems Property</b>
    <p>Click on the button to change the 
      alignItems property to 'initial'</p>
    
    <div class="main">
        <div style="background-color:lightblue;"
          Item 1 </div>
        <div style="background-color:lightgreen;"
          Item 2 </div>
        <div style="background-color:lightsalmon;"
          Item 3 </div>
        <div style="background-color:lightyellow;"
          Item 4 </div>
    </div>
    
    <button onclick="changePos()">
      Change alignItems property
    </button>
  
    <script>
        function changePos() {
            elem = document.querySelector('.main');
  
            // Setting alignItems to initial
            elem.style.alignItems = 'initial';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before pressing the button:
  • After pressing the button:

Example-7: Using the inherit value. This inherits the position from its parent element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>DOM Style alignItems Property</title>
    <style>
        .main {
            width: 200px;
            height: 150px;
            border: solid;
            display: flex;
        }
          
        #parent {
            /* Setting the parent div's 
              align-items to flex-end */
            align-items: flex-end;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style alignItems Property</b>
    <p>Click on the button to change the 
       alignItems property to 'inherit'</p>
    
    <div id="parent">
        <div class="main">
            <div style="background-color:lightblue;"
              Item 1 </div>
            <div style="background-color:lightgreen;"
              Item 2 </div>
            <div style="background-color:lightsalmon;"
              Item 3 </div>
            <div style="background-color:lightyellow;"
              Item 4 </div>
        </div>
    </div>
  
    <button onclick="changePos()">
      Change alignItems property
    </button>
  
    <script>
        function changePos() {
            elem = document.querySelector('.main');
  
            // Setting alignItems to inherit from parent div
            elem.style.alignItems = 'inherit';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before pressing the button:
    inherit-before
  • After pressing the button:

Supported Browsers: The browser supported by alignItems Property are listed below:

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