Javascript Reference - HTML DOM Style justifyContent Property

The justifyContent property gets and sets how to align the flexible container's items when the items do not use all available space horizontally.

Browser Support


`justifyContent`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the justifyContent property:

var v = object.style.justifyContent

Set the justifyContent property:

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

Property Values

flex-start: Default value. pack items at the start
flex-end: pack items to the end
center: center items along the line
space-between: evenly distribute items
space-around: evenly distribute items with equal space
initial: sets to default value
inherit: Inherits this property from its parent element

Technical Details

Default Value:	flex-start
Return Value:	A string representing the justify-content property
CSS Version	CSS3

Example

The following code shows how to add some space between the items of the flexible <div> element.


<!DOCTYPE html>
<html>
<head>
<style> 
#main {<!--from ww  w  . j av a2  s .  c  om-->
    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:red;">A</div>
  <div style="background-color:blue;">B</div>
  <div style="background-color:yellow;">C</div>
  <div style="background-color:pink;">D</div>
</div>

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("main").style.justifyContent = "space-between";
}
</script>

</body>
</html>

The code above is rendered as follows: