Skip to content
Related Articles

Related Articles

HTML | DOM Style alignItems Property

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

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.

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

The values are explained using the following examples: 

Example-1: Using the stretch value. 

html




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

html




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

html




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

html




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

html




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

html




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

html




<!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 29.0 and above
  • Edge 12.0 and above
  • Internet Explorer 11.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!