Javascript DOM CSS Style justifyContent Property

Introduction

Make some space between the items of the flexible <div> element:

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

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

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#main {//  w  w  w  .  jav a2 s  . c o m
  width: 400px;
  height: 150px;
  border: 1px solid #000000;
  display: flex;
  justify-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:red;"></div>
  <div style="background-color:pink;"></div>
</div>
<button onclick="myFunction()">Test</button>
<script>
function myFunction() {
  document.getElementById("main").style.justifyContent = "space-between";
}
</script>

</body>
</html>

The justifyContent property aligns the flexible container's items when the items do not use all available space horizontally.

Use the alignContent property to align the items vertically.

Property Values

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

The justifyContent property returns a String representing the justify-content property of an element.

Previous Next