justifyContent Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:justifyContent

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. justifyContent

Description

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

Property Values

Value Description
flex-startDefault value. Items are positioned at the beginning of the container
flex-end positioned at the end of the container
centerpositioned 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.

Technical Details

Item Value
Default Value: flex-start
Return Value: A String, representing the justify-content property of an element
CSS VersionCSS3

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

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#main {//w  w w  .jav  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:coral;"></div>
  <div style="background-color:red;"></div>
  <div style="background-color:khaki;"></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>

Related Tutorials