Javascript DOM CSS Style alignContent Property

Introduction

The alignContent property aligns the flexible container's items vertically.

Position the items of the flexible <div> element with space between the lines:

document.getElementById("main").style.alignContent = "space-between";

Click the button to set the value of the alignContent property to "space-between".

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#main {//www  . j  a v  a2 s . c o  m
  width: 140px;
  height: 300px;
  border: 1px solid #000000;
  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>

We can use use the justifyContent property to align the items horizontally.

Property Values

Value	Description
stretch	`Default`. stretched to fit the container
center	positioned at the center of the container
flex-start	positioned at the beginning of the container
flex-end	positioned at the end of the container
space-between	positioned with space between the lines
space-around	positioned with space before, between, and after the lines
initial	Set to its default value.
inherit	Inherits this property from its parent element.

The alignContent property returns a String, representing the align-content property of an element.

Previous Next