HTML - DOM Style Object justifyContent Property

Quiz

HTML DOM Style Object justifyContent property sets or returns the alignment of flex items on main axis or horizontally when they do not use all the available spaces.

Syntax

Set the justifyContent property

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

Get the justifyContent property

object.style.justifyContent;

Property Values

Value	Description
flex-start	It is the default value which aligns the flex items at the starting of the container.
flex-end	It aligns the flex items at the end of the container.
center	It aligns the flex items at the center of the container.
space-between	It positions the flex items with spaces between the lines.
space-around	It positions the flex items with spaces before, between, and after the lines.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents justify content property of an element.

Examples of HTML DOM Style Object 'justifyContent' Property

The following examples illustrates justifyContent property applied on a dive element which have five items of different colors.

Set the Flex Items to 'flex-start' and 'flex-end'

In this example we have aligned the items of flex container to flex-start, flex-end and center.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #flex {
            width: 700px;
            height: 300px;
            border: 1px solid black;
            display: flex;
        }
        #flex div {
            height: 80px;
            width: 80px;
        }
    </style>
    <title>
        HTML DOM Style Object justifyContent Property
    </title>
</head>
<body>
    <p>
        Click to try different justifyContent property.
    </p>
    <button onclick="funTwo()">Flex-End</button>
    <button onclick="fun()">Flex-Start</button>
    <button onclick="funThree()">Center</button>
    <br>
    <br>
    <div id="flex">
        <div style="background-color: #04af2f;">1</div>
        <div style="background-color: aqua;">2</div>
        <div style="background-color: yellow;">3</div>
        <div style="background-color: whitesmoke">4</div>
        <div style="background-color: black;">5</div>
    </div>
    <script>
        function funTwo() {
            document.getElementById("flex")
                .style.justifyContent = "flex-end";
        }
        function fun() {
            document.getElementById("flex")
                .style.justifyContent = "flex-start";
        }
        function funThree() {
            document.getElementById("flex")
                .style.justifyContent = "center";
        }
    </script>
</body>
</html>

Set the Flex Items to 'space-between' and 'space-around'

In this example we have aligned the items of flex container to space-between and space-around.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #flex {
            width: 700px;
            height: 300px;
            border: 1px solid black;
            display: flex;
        }
        #flex div {
            height: 80px;
            width: 80px;
        }
    </style>
    <title>
        HTML DOM Style Object justifyContent Property
    </title>
</head>
<body>
    <p>
        Click to try different justifyContent property.
    </p>
    <button onclick="funTwo()">Space-Between</button>
    <button onclick="fun()">Space-Around</button>
    <br>
    <br>
    <div id="flex">
        <div style="background-color: #04af2f;">1</div>
        <div style="background-color: aqua;">2</div>
        <div style="background-color: yellow;">3</div>
        <div style="background-color: whitesmoke">4</div>
        <div style="background-color: black;">5</div>
    </div>
    <script>
        function funTwo() {
            document.getElementById("flex")
                .style.justifyContent = "space-between";
        }
        function fun() {
            document.getElementById("flex")
                .style.justifyContent = "space-around";
        }
    </script>
</body>
</html>

Supported Browsers

Property
justifyContent	Yes 29	Yes 12	Yes 20	Yes 9	Yes 12.1

html_dom.htm

Print Page