HTML | DOM Style alignItems Property

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>