Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style alignItems Property

  • Last Updated : 29 Jul, 2019

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.






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

Output:

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

Example-2: Using the center value.




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

Output:

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

Example-3: Using the flex-start value.




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

Output:

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

Example-4: Using the flex-end value.




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

Output:

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

Example-5: Using the baseline value.






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

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.




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

Output:

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

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




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

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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :