CSS - align-self Property

Quiz

CSS align-self property controls the alignment of an individual item within a container that is using a flexbox or grid layout. While align-items is used to set the default alignment for all items in a container, align-self overrides that alignment for a specific item.

The items are aligned on the cross-axis in flexbox, whereas in a grid, the property aligns the items inside the grid area.

Syntax

align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;

Property Values

Value	Description
auto	The element inherits its parent container's align-items property, if no parent container then "stretch" is used. Default.
stretch	The element is placed at a position to fit the container.
center	The element is placed at the center position of the container.
flex-start	The element is placed at the beginning position of the container.
flex-end	The element is placed at the ending position of the container.
baseline	The element is placed at the baseline position of the container.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Align Self Property

The following examples explain the align-self property with different values.

Default Position of Flex Item

To let a flex item, take the position given by the align-items property without having its own position, we use the auto value. In the following example, the third flex item is set to the intial position inside the flex container.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex_container {
            display: flex;
            align-items: center;
            border:1px solid black;
            height: 300px;
            gap:10px;
        }

        .flex_container div {
            background-color: grey;
            border:2px solid black;
           
        }

        .flex-item {
            align-self: auto;
        }
    </style>
</head>

<body>
    <h2>CSS align-self property</h2>
    <div class="flex_container">
        <div>Flex item 1</div>
        <div>Flex item 2</div>
        <div class="flex-item">Flex item 3</div>
        <div>Flex item 4</div>
        <div>Flex item 5</div>
    </div>
</body>

</html>

Stretched Flex Item

To let a flex item be positioned such that it fits the container, we use the stretch value. In the following example, the individual flex items are stretched vertically to fill the available space of the flex container.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            border:1px solid black;
            height: 350px;
            flex-wrap: wrap;
            align-items: center;
            gap:10px;
        }

        .flex-container div {
            background-color: grey;
            border:2px solid black;
            
        }
        .flex-item{
            align-self:stretch;
        }
    </style>
</head>

<body>
    <h2>CSS align-self property</h2>
    <div class="flex-container">
        <div>Flex item 1</div>
        <div>Flex item 2</div>
        <div class="flex-item">Flex item 3</div>
        <div>Flex item 4</div>
    </div>
</body>

</html>

Flex Item at Center

To let a flex item take the center position against the positions of other flex items, we use center value. In the following example, third flex item is set to the center of the cross axis of a flex container.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex_container {
            display: flex;
            border:1px solid black;
            height: 300px;
            gap:10px;
        }

        .flex_container div {
            background-color: grey;
            border:2px solid black;
            height: 50px;
        }

        .flex-item {
            align-self: center;
        }
    </style>
</head>

<body>
    <h2>CSS align-self property</h2>
    <div class="flex_container">
        <div>Flex item 1</div>
        <div>Flex item 2</div>
        <div class="flex-item">Flex item 3</div>
        <div>Flex item 4</div>
        <div>Flex item 5</div>
    </div>
</body>

</html>

Flex Item at Start

To let a flex item take the starting position against other flex items, we use the flex-start value. In the following example, third flex item is set to the start of the cross axis of a flex container.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex_container {
            display: flex;
            align-items: center;
            border:1px solid black;
            height: 300px;
            gap:10px;
        }

        .flex_container div {
            background-color: grey;
            border:2px solid black;
            height: 50px;
        }

        .flex-item {
            align-self: flex-start;
        }
    </style>
</head>

<body>
    <h2>CSS align-self property</h2>
    <div class="flex_container">
        <div>Flex item 1</div>
        <div>Flex item 2</div>
        <div class="flex-item">Flex item 3</div>
        <div>Flex item 4</div>
        <div>Flex item 5</div>
    </div>
</body>

</html>

Flex Item at End

To let a flex item take the ending position against other flex items, we use the flex-end value. In the following example, third flex item is set to the end of the cross axis of a flex container.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex_container {
            display: flex;
            align-items: center;
            border:1px solid black;
            height: 300px;
            gap:10px;
        }

        .flex_container div {
            background-color: grey;
            border:2px solid black;
            height: 50px;
        }

        .flex-item {
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <h2>CSS align-self property</h2>
    <div class="flex_container">
        <div>Flex item 1</div>
        <div>Flex item 2</div>
        <div class="flex-item">Flex item 3</div>
        <div>Flex item 4</div>
        <div>Flex item 5</div>
    </div>
</body>

</html>

Flex Item at Baseline

To let a flex item be positioned at the baseline of the container, we use the baseline value. In the following example, the third flex item is set along the baseline of the container.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .flex_container {
            display: flex;
            align-items: center;
            border:1px solid black;
            height: 300px;
            gap:10px;
        }

        .flex_container div {
            background-color: grey;
            border:2px solid black;
            height: 50px;
        }

        .flex-item {
            align-self: baseline;
        }
    </style>
</head>

<body>
    <h2>CSS align-self property</h2>
    <div class="flex_container">
        <div>Flex item 1</div>
        <div>Flex item 2</div>
        <div class="flex-item">Flex item 3</div>
        <div>Flex item 4</div>
        <div>Flex item 5</div>
    </div>
</body>

</html>

Supported Browsers

Property
align-self	57.0	16.0	52.0	10.1	44.0

css_reference.htm

Print Page