HTML - DOM Style Object alignItems Property

Quiz

HTML DOM Style Object alignItems property is used to set the default alignment of items inside flexible container.

Syntax

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

Set the alignItems property:

object.style.alignItems = "stretch | center | flex-start | flex-end | baseline | initial | inherit";

Get the alignItems property:

object.style.alignItems;

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.
baseline	It positions the items at the baseline of the container.
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-items property of the element.

Examples of HTML DOM Style Object 'alignItems' Property

The following examples illustrates different values of the property.

Setting the Value to stretch and center

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Style Object alignItems Property</title>
    <style>
        div#align {
            width: 300px;
            height: 300px;
            border: 1px solid #000000;
            display: flex;
        }
    </style>
</head>
<body>
    <div id="align">
        <div style="background-color:rgb(158, 225, 118);">Welcome</div>
        <div style="background-color:rgb(119, 205, 234);">to Tutorials</div>
        <div style="background-color:rgb(211, 145, 219);">Point</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.alignItems = "stretch";
        }
        function funtwo() {
            document.getElementById("align").style.alignItems = "center";
        }
    </script>
</body>
</html>

Setting the Value to flex-start and flex-end

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Style Object alignItems Property</title>
    <style>
        div#align {
            width: 300px;
            height: 300px;
            border: 1px solid #000000;
            display: flex;
        }
    </style>
</head>
<body>
    <div id="align">
        <div style="background-color:rgb(158, 225, 118);">Welcome</div>
        <div style="background-color:rgb(119, 205, 234);">to Tutorials</div>
        <div style="background-color:rgb(211, 145, 219);">Point</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.alignItems = "flex-start";
        }
        function funtwo() {
            document.getElementById("align").style.alignItems = "flex-end";
        }
    </script>
</body>
</html>

Setting the Value to baseline

In this example we have set alignItems value to baseline.

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

Supported Browsers

Property
alignItems	Yes 29	Yes 12	Yes 20	Yes 9	Yes 12.1

html_dom.htm

Print Page