HTML - DOM Style Object alignContent Property

Quiz

HTML DOM Style Object alignContent property is used to align the flexible container's item on the cross-axis or vertical axis when they do not use all available spaces.

Syntax

Given below are the syntax to get or set the alignContent property.

Get the alignContent property

object.style.alignContent;

Set the alignContent property

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

Property Values

Below listed values are accepted by this property.

Value	Description
stretch	It is the default property value. It stretches the items to fit the container.
center	It positions the items to the center of the container.
flex-start	It positions the items at the beginning of the container.
flex-end	It positions the items at the end of the container.
space-between	It positions the items with spaces between the lines.
space-around	It positions the 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 align-content property of the element.

Examples of HTML DOM Style Object 'alignContent' Property

The following examples illustrates different values of the property.

Setting the Value to stretch and center

In this example we have set alignContent value to stretch and center.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Style Object alignContent Property</title>
    <style>
        #align {
            width: 300px;
            height: 300px;
            border: 1px solid #000000;
            display: flex;
            flex-flow: row wrap;
            align-content: space-around;
        }
        #align div {
            width: 300px;
            height: 70px;
        }
    </style>
</head>
<body>
    <div id="align">
        <div style="background-color:rgb(158, 225, 118);"></div>
        <div style="background-color:rgb(119, 205, 234);"></div>
        <div style="background-color:rgb(211, 145, 219);"></div>
    </div>
    <p>Click button to change property.</p>
    <p id="id"></p>
    <button onclick="fun()">stretch</button>
    <button onclick="funtwo()">center</button>
    <script>
        function fun() {
            document.getElementById("align").style.alignContent = "stretch";
        }
        function funtwo() {
            document.getElementById("align").style.alignContent = "center";
        }
    </script>
</body>
</html>

Setting the Value to flex-start and flex-end

In this example we have set alignContent value to flex-start and flex-end.

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM Style Object alignContent Property</title>
    <style>
        #align {
            width: 300px;
            height: 300px;
            border: 1px solid #000000;
            display: flex;
            flex-flow: row wrap;
            align-content: space-around;
        }
        #align div {
            width: 300px;
            height: 70px;
        }
    </style>
</head>
<body>
    <div id="align">
        <div style="background-color:rgb(158, 225, 118);"></div>
        <div style="background-color:rgb(119, 205, 234);"></div>
        <div style="background-color:rgb(211, 145, 219);"></div>
    </div>
    <p>Click button to change property.</p>
    <p id="id"></p>
    <button onclick="fun()">flex-start</button>
    <button onclick="funtwo()">flex-end</button>
    <script>
        function fun() {
            document.getElementById("align").style.alignContent = "flex-start";
        }
        function funtwo() {
            document.getElementById("align").style.alignContent = "flex-end";
        }
    </script>
</body>
</html>

Setting the Value to 'space-between' and 'space-around'

In this example we have set alignContent value to space-between and space-around.

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM Style Object alignContent Property</title>
    <style>
        #align {
            width: 300px;
            height: 400px;
            border: 1px solid #000000;
            display: flex;
            flex-flow: row wrap;
        }
        #align div {
            width: 300px;
            height: 70px;
        }
    </style>
</head>
<body>
    <div id="align">
        <div style="background-color:rgb(158, 225, 118);"></div>
        <div style="background-color:rgb(119, 205, 234);"></div>
        <div style="background-color:rgb(211, 145, 219);"></div>
    </div>
    <p>Click button to change property.</p>
    <p id="id"></p>
    <button onclick="fun()">Space Between</button>
    <button onclick="funtwo()">space-around</button>
    <script>
        function fun() {
            document.getElementById("align").style.alignContent = "space-between";
        }
        function funtwo() {
            document.getElementById("align").style.alignContent = "space-around";
        }
    </script>
</body>
</html>

Supported Browsers

Property
alignContent	Yes 29	Yes 12	Yes 28	Yes 9	Yes 12.1

html_dom.htm

Print Page