HTML - DOM Style Object alignSelf Property

Quiz

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

Syntax

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

Get the alignSelf property:

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

Set the alignSelf property:

object.style.alignSelf;

Property Values

Below listed values are accepted by this property.

Value	Description
auto	It is the default property value. In this element inherits it's parent containers align-items property or if it has no parent container, it sets element to stretch.
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-self property of the element.

Examples of HTML DOM Style Object 'alignSelf' Property

The following examples illustrates different values of the property.

Setting the Value to stretch and center

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Style Object alignSelf Property</title>
    <style>
        #align {
            width: 300px;
            height: 300px;
            border: 1px solid #000000;
            display: flex;
        }

        #point {
            align-self: center;
        }
    </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);" id="point">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("point").style.alignSelf = "stretch";
        }
        function funtwo() {
            document.getElementById("point").style.alignSelf = "center";
        }
    </script>
</body>
</html>

Setting the Value to flex-start and flex-end

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Style Object alignSelf Property</title>
    <style>
        #align {
            width: 300px;
            height: 300px;
            border: 1px solid #000000;
            display: flex;
        }

        #point {
            align-self: center;
        }
    </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);" id="point">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("point").style.alignSelf = "flex-start";
        }
        function funtwo() {
            document.getElementById("point").style.alignSelf = "flex-end";
        }
    </script>
</body>
</html>

Setting the Value to auto and baseline

In this example we have set alignSelf value to auto and baseline.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM Style Object alignSelf Property</title>
    <style>
        #align {
            width: 300px;
            height: 300px;
            border: 1px solid #000000;
            display: flex;
        }
        #point {
            align-self: center;
        }
    </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);" id="point">Point</div>
    </div>
    <p>Click button to change property.</p>
    <p id="id"></p>
    <button onclick="fun()">auto</button>
    <button onclick="funtwo()">baseline</button>
    <script>
        function fun() {
            document.getElementById("point").style.alignSelf = "auto";
        }
        function funtwo() {
            document.getElementById("point").style.alignSelf = "baseline";
        }
    </script>
</body>
</html>

Supported Browsers

Property
alignSelf	Yes 29	Yes 12	Yes 20	Yes 9	Yes 12.1

html_dom.htm

Print Page