HTML | DOM Style alignContent Property

Last Updated : 10 Aug, 2022

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.

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

Example-1: Using the stretch value.

HTML

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

HTML

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

HTML

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

HTML

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

HTML

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

HTML

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

HTML

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

HTML

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