HTML | DOM Style alignContent Property

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:

    stretch-before

  • After clicking the button:

    stretch-after

Example-2: Using the center value.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:

    center-before

  • After clicking the button:

    center-after

Example-3: Using the flex-start value.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:

    flex-start-before

  • After clicking the button:

    flex-start-after

Example-4: Using the flex-end value.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:

    flex-end-before

  • After clicking the button:

    flex-end-after

Example-5: Using the space-between value.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:

    space-between-before

  • After clicking the button:

    space-between-after

Example-6: Using the space-around value.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:

    space-around-before

  • After clicking the button:

    space-around-after

Example-7: Using the initial value.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before clicking the button:

    initial-before

  • After clicking the button:

    initial-after

Example-8: Using the inherit value.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

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.