CSS Property: align-self

The align-self property specifies the block alignment for the selected element within a flexbox or grid container. If you want to align a grid element in the inline direction instead of the block direction, use the justify-self or justify-items property. The align-self property overrides the align-items property.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>align-self</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        ol {
            display: flex;
            align-items: end;
            width: 800px;
            height: 200px;
            border: 2px solid black;
            border-radius: 12px;
            padding: 10px;
        }
        li {
            list-style: none;
            width: 65px;
            height: 60px;
            background: yellow;
            color: #333333;
            border: 1px solid black;
            text-align: center;
            line-height: 60px;
            -webkit-text-fill-color: #333333;
        }
        .alignSelfCenter {align-self: center}
        .alignSelfFlexStart {align-self: flex-start}
        .alignSelfFlexEnd {align-self: flex-end}
    </style>
</head>
<body>
<ol>
    <li class="alignSelfFlexEnd">1</li>
    <li class="alignSelfFlexEnd">2</li>
    <li class="alignSelfFlexEnd">3</li>
    <li class="alignSelfFlexEnd">4</li>
    <li class="alignSelfCenter">5</li>
    <li class="alignSelfCenter">6</li>
    <li class="alignSelfCenter">7</li>
    <li class="alignSelfCenter">8</li>
    <li class="alignSelfFlexStart">9</li>
    <li class="alignSelfFlexStart">10</li>
    <li class="alignSelfFlexStart">11</li>
    <li class="alignSelfFlexStart">12</li>
</ol>
</body>
</html>

RESULT

auto	The element inherits the align‑items property of its parent container.	View example
baseline	The element is positioned on the baseline of the container.	View example
center	The element is placed in the center of the container.	View example
flex-end	The element is placed at the end of the container.	View example
flex-start	The element is placed at the start of the container.	View example
inherit	The element inherits the property from its parent element.	View example
initial	Sets the property to its default value.	View example
stretch	The element is sized so that it stretches to fill the container.	View example

The align-self property specifies the block alignment for the selected element within a flexbox or grid container.