CSS Lastnost: align-items

Lastnost align-items določa privzeto poravnavo za elemente znotraj flexbox-a ali vsebnika mreže. V vsebniku flexbox so elementi poravnani na prečni osi, ki je privzeto navpična. V vsebniku mreže so elementi poravnani v smeri bloka. Da bi ta lastnost imela kakršen koli učinek poravnave, potrebujejo elementi razpoložljiv prostor okoli sebe v ustrezni smeri.

PRIMER

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

    <style>
        * {
            box-sizing: border-box;
        }
        div {
            display: flex;
            align-items: center;
            width: 400px;
            height: auto;
            border: 2px solid;
            border-radius: 12px;
            padding: 10px;
            background: yellow;
        }
        div.a {
            width: 40px;
            height: 40px;
            margin: 4px;
            background: green;
            color: yellow;
            border-radius: 50%;
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), 1px 0 4px rgba(0, 0, 0, 0.2), 0 0 8px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>
<body>
<div>
    <div class="a">1</div>
    <div class="a">2</div>
    <div class="a">3</div>
    <div class="a">4</div>
    <div class="a">5</div>
</div>
</body>
</html>

REZULTAT

baseline	Elementi so nameščeni na osnovni liniji vsebnika.	Glej primer
center	Predmeti so postavljeni na sredino vsebnika.	Glej primer
end	Predmeti so postavljeni na konec svojih posameznih mrežnih celic v smeri bloka.	Glej primer
flex-end	Predmeti so nameščeni na konec vsebnika.	Glej primer
flex-start	Predmeti so nameščeni na začetek vsebnika.	Glej primer
inherit	Podeduje lastnost od nadrejenega elementa.	Glej primer
initial	Nastavi na privzeto vrednost.	Glej primer
normal	Obnaša se kot raztezanje za flexbox in mrežne elemente.	Glej primer
start	Predmeti so postavljeni na začetku svojih posameznih mrežnih celic v smeri bloka.	Glej primer
stretch	Predmeti so raztegnjeni, da se prilagodijo vsebniku.	Glej primer

Podaja poravnavo za elemente znotraj prilagodljivega vsebnika.