Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM Style alignContent Property
  • Difficulty Level : Basic
  • Last Updated : 29 Jul, 2019

The DOM Style alignContent property is used to align the items of a flexible container when they do not use all available space on the cross-axis.

Syntax:

  • To get the alignContent Property
    object.style.alignContent
  • To set the alignContent Property
    object.style.alignContent = "stretch | center | flex-start |
    flex-end | space-between | space-around | initial | inherit"

Property Values:

  • stretch: This is used to stretch the items to fit the container.
  • 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.
  • space-between: This is used to position the items with even space between the lines. The first item is at the first line and the last item at the last line. The other items are spaced in between.
  • space-around: This is used to position the items with equal space around them.
  • initial: This is used to set this property to its default value.
  • inherit: This inherits the property from its parent.

Example-1: Using the stretch value.




<!DOCTYPE html>
<html>
<title>DOM Style alignContent property</title>
  
<head>
    <style>
        .main {
            width: 250px;
            height: 300px;
            border: 1px solid;
            display: flex;
            flex-flow: row wrap;
            /* setting to space-around to 
             observe the effect of 'stretch'*/
            align-content: space-around;
        }
          
        .main div {
            width: 250px;
            height: 70px;
            font-size: 2rem;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>DOM Style alignContent</b>
  
    <p>Click the button to change the
      value of the alignContent to "stretch"</p>
  
    <div class="main">
        <div style="background-color:green;">
          Geeks
      </div>
        <div style="background-color:lightgreen;">
          For
      </div>
        <div style="background-color:green;">
          Geeks
      </div>
    </div>
  
    <button onclick="changeAlign()">
      Change alignContent
  </button>
  
    <script>
        function changeAlign() {
            document.querySelector('.main').style.alignContent =
              "stretch";
        }
    </script>
  
</body>
  
</html>

Output:



  • Before clicking the button:

    stretch-before

  • After clicking the button:

    stretch-after

Example-2: Using the center value.




<!DOCTYPE html>
<html>
<title>
  DOM Style alignContent property
  </title>
  
<head>
    <style>
        .main {
            width: 250px;
            height: 300px;
            border: 1px solid;
            display: flex;
            flex-flow: row wrap;
        }
          
        .main div {
            width: 250px;
            height: 70px;
            font-size: 2rem;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>DOM Style alignContent</b>
  
    <p>Click the button to change the 
      value of the alignContent to "center"</p>
  
    <div class="main">
        <div style="background-color:green;">
          Geeks
      </div>
        <div style="background-color:lightgreen;">
          For
      </div>
        <div style="background-color:green;">
          Geeks
      </div>
    </div>
  
    <button onclick="changeAlign()">
      Change alignContent
  </button>
  
    <script>
        function changeAlign() {
            document.querySelector('.main').style.alignContent =
              "center";
        }
    </script>
  
</body>
  
</html>

Output:

  • Before clicking the button:

    center-before

  • After clicking the button:

    center-after

Example-3: Using the flex-start value.




<!DOCTYPE html>
<html>
<title>
  DOM Style alignContent property
  </title>
  
<head>
    <style>
        .main {
            width: 250px;
            height: 300px;
            border: 1px solid;
            display: flex;
            flex-flow: row wrap;
        }
          
        .main div {
            width: 250px;
            height: 70px;
            font-size: 2rem;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>DOM Style alignContent</b>
  
    <p>Click the button to change the 
      value of the alignContent to "flex-start"</p>
  
    <div class="main">
        <div style="background-color:green;">
          Geeks
      </div>
        <div style="background-color:lightgreen;">
          For
      </div>
        <div style="background-color:green;">
          Geeks
      </div>
    </div>
  
    <button onclick="changeAlign()">
      Change alignContent
  </button>
  
    <script>
        function changeAlign() {
         document.querySelector('.main').style.alignContent =
            "flex-start";
        }
    </script>
  
</body>
  
</html>

Output:

  • Before clicking the button:

    flex-start-before

  • After clicking the button:

    flex-start-after

Example-4: Using the flex-end value.




<!DOCTYPE html>
<html>
<title>
  DOM Style alignContent property
 </title>
  
<head>
    <style>
        .main {
            width: 250px;
            height: 300px;
            border: 1px solid;
            display: flex;
            flex-flow: row wrap;
        }
          
        .main div {
            width: 250px;
            height: 70px;
            font-size: 2rem;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>
   DOM Style alignContent</b>
  
    <p>Click the button to change the
      value of the alignContent to "flex-end"
  </p>
  
    <div class="main">
        <div style="background-color:green;">
          Geeks
      </div>
        <div style="background-color:lightgreen;">
          For
      </div>
        <div style="background-color:green;">
          Geeks
      </div>
    </div>
  
    <button onclick="changeAlign()">
      Change alignContent
  </button>
  
    <script>
        function changeAlign() {
         document.querySelector('.main').style.alignContent =
              "flex-end";
        }
    </script>
  
</body>
  
</html>

Output:

  • Before clicking the button:

    flex-end-before

  • After clicking the button:

    flex-end-after

Example-5: Using the space-between value.






<!DOCTYPE html>
<html>
<title>
  DOM Style alignContent property
 </title>
  
<head>
    <style>
        .main {
            width: 250px;
            height: 300px;
            border: 1px solid;
            display: flex;
            flex-flow: row wrap;
        }
          
        .main div {
            width: 250px;
            height: 70px;
            font-size: 2rem;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>DOM Style alignContent</b>
  
    <p>Click the button to change the
      value of the alignContent to "space-between"
  </p>
  
    <div class="main">
        <div style="background-color:green;">
          Geeks
      </div>
        <div style="background-color:lightgreen;">
          For
      </div>
        <div style="background-color:green;">
          Geeks
      </div>
    </div>
  
    <button onclick="changeAlign()">
      Change alignContent
  </button>
  
    <script>
        function changeAlign() {
         document.querySelector('.main').style.alignContent = 
          "space-between";
        }
    </script>
  
</body>
  
</html>

Output:

  • Before clicking the button:

    space-between-before

  • After clicking the button:

    space-between-after

Example-6: Using the space-around value.




<!DOCTYPE html>
<html>
<title>
  DOM Style alignContent property
  </title>
  
<head>
    <style>
        .main {
            width: 250px;
            height: 300px;
            border: 1px solid;
            display: flex;
            flex-flow: row wrap;
        }
          
        .main div {
            width: 250px;
            height: 70px;
            font-size: 2rem;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>DOM Style alignContent</b>
  
    <p>Click the button to change the
      value of the alignContent to "space-around"
  </p>
  
    <div class="main">
        <div style="background-color:green;">
          Geeks
      </div>
        <div style="background-color:lightgreen;">
          For
      </div>
        <div style="background-color:green;">
          Geeks
      </div>
    </div>
  
    <button onclick="changeAlign()">
      Change alignContent
  </button>
  
    <script>
        function changeAlign() {
         document.querySelector('.main').style.alignContent =
           "space-around";
        }
    </script>
  
</body>
  
</html>

Output:

  • Before clicking the button:

    space-around-before

  • After clicking the button:

    space-around-after

Example-7: Using the initial value.




<!DOCTYPE html>
<html>
<title>
  DOM Style alignContent property
  </title>
  
<head>
    <style>
        .main {
            width: 250px;
            height: 300px;
            border: 1px solid;
            display: flex;
            flex-flow: row wrap;
            /* setting to space-around
          to observe the effect of 'initial' */
            align-content: space-around;
        }
          
        .main div {
            width: 250px;
            height: 70px;
            font-size: 2rem;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>DOM Style alignContent</b>
  
    <p>Click the button to change the
      value of the alignContent to "initial"
  </p>
  
    <div class="main">
        <div style="background-color:green;">
          Geeks
      </div>
        <div style="background-color:lightgreen;">
          For
      </div>
        <div style="background-color:green;">
          Geeks
      </div>
    </div>
  
    <button onclick="changeAlign()">
      Change alignContent
  </button>
  
    <script>
        function changeAlign() {
         document.querySelector('.main').style.alignContent =
              "initial";
        }
    </script>
  
</body>
  
</html>

Output:

  • Before clicking the button:

    initial-before

  • After clicking the button:

    initial-after

Example-8: Using the inherit value.




<!DOCTYPE html>
<html>
<title>
  DOM Style alignContent property
  </title>
  
<head>
    <style>
        #parent {
            /* Set the align-content of 
          parent to observe effect of 'inherit' */
            align-content: flex-end;
        }
          
        .main {
            width: 250px;
            height: 300px;
            border: 1px solid;
            display: flex;
            flex-flow: row wrap;
        }
          
        .main div {
            width: 250px;
            height: 70px;
            font-size: 2rem;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>DOM Style alignContent</b>
  
    <p>Click the button to change the 
      value of the alignContent to "inherit"
  </p>
    <div id="parent">
        <div class="main">
            <div style="background-color:green;">
              Geeks
          </div>
            <div style="background-color:lightgreen;">
              For
          </div>
            <div style="background-color:green;">
              Geeks
          </div>
        </div>
    </div>
  
    <button onclick="changeAlign()">
      Change alignContent
  </button>
  
    <script>
        function changeAlign() {
            document.querySelector('.main').style.alignContent =
              "inherit";
        }
    </script>
  
</body>
  
</html>

Output:

  • Before clicking the button:

    inherit-before

  • After clicking the button:

    inherit-after

Supported Browsers: The browser supported by alignContent property are listed below:

  • Google Chrome 21.0
  • Internet Explorer 11.0
  • Firefox 28.0
  • Opera 12.1
  • Safari 7.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :