Javascript Reference - HTML DOM Style alignContent Property

The alignContent property aligns the flexible container's items.

Browser Support


`Style alignContent`	Yes	11.0	Yes	No	Yes

Syntax

Return the alignContent property:

object.style.alignContent

Set the alignContent property:

object.style.alignContent='stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit';

Property Values

Value	Description
stretch	Default. Stretch item to fit the container
center	Center items in the container
flex-start	Put items at the beginning of the container
flex-end	Put items at the end of the container
space-between	Put items with space between the lines
space-around	Put items with space before, between, and after the lines
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

Summary

Default Value:	stretch
Return Value:	A string representing the align-content property
CSS Version	CSS3

Example

The following code shows how to align the items of the flexible <div> element.


<!DOCTYPE html>
<html>
<head>
<style> 
#main {<!--from ww  w.ja v a2 s. c o m-->
  width: 130px;
  height: 300px;
  border: 1px solid black;
  display: flex;
  flex-flow: row wrap;
  align-content: space-around; 
}

#main div {
  width: 70px;
  height: 70px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
  <div style="background-color:lightgreen;"></div>
</div>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("main").style.alignContent = "space-between";
}
</script>
</body>
</html>

The code above is rendered as follows: