CSS Lastnost: align-self

Lastnost align-self podaja poravnavo v smeri bloka za izbrani element znotraj vsebnika flexbox ali mreže. Če želimo element mreže poravnati v smeri znotraj vrstice namesto v smeri bloka, uporabimo lastnost justify-self ali justify-items. Lastnost align-self preglasi lastnost align-items.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<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>

REZULTAT

auto	Element podeduje lastnost align-items svojega nadrejenega vsebnika.	Glej primer
baseline	Element je nameščen na osnovni liniji vsebnika.	Glej primer
center	Element je nameščen na sredini vsebnika.	Glej primer
flex-end	Element je nameščen na konec vsebnika.	Glej primer
flex-start	Element je nameščen na začetek vsebnika.	Glej primer
inherit	Podeduje lastnost od nadrejenega elementa.	Glej primer
initial	Nastavi na privzeto vrednost.	Glej primer
stretch	Element je nameščen tako, da se prilagaja vsebniku.	Glej primer

Lastnost align-self podaja poravnavo v smeri bloka za izbrani element znotraj vsebnika flexbox ali mreže.