CSS Lastnost: justify-self

Lastnost justify-self poravna postavko mreže znotraj njene mrežne celice v smeri vrstice. Da ima element kakršen koli učinek potrebuje prostor okoli sebe. Tukaj so uradne vrednosti, ki so navedene v CSS specifikaciji in dobro delujejo v vseh sodobnih brskalnikih:

PRIMER

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

    <style>
        * {
            box-sizing: border-box;
        }

        /* starš: mrežni vsebnik */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4 stolpci z enakimi dimenzijami */
            gap: 10px; /* razmik med mrežnimi celicami */
            width: 100%; /* širina mrežnega vsebnika */
            margin: 20px auto; /* poravnavanje mrežnega vsebnika na sredino */
            border: 2px solid gray; /* meja, da bo vsebnik bolj viden */
            color: #333333; /* barva besedila */
        }

        /* otroški elementi */
        .grid-item {
            justify-self: auto; /* privzeta vrednost (sledi staršu ali specifični nastavitvi mreže) */
            aspect-ratio: 3/2; /* razmerje širine in višine: 3:2 */
            height: 10vw; /* višina mrežnega elementa */
            border: 1px solid black; /* rob otroških elementov */
            text-align: center; /* horizontalno centriranje besedila */
            line-height: 10vw; /* vertikalno centriranje vsebine */
        }

        /* barvne nastavitve posameznih elementov */
        .a {
            background: greenyellow;
        }
        .b {
            background: orange;
        }
        .c {
            background: pink;
        }
        .d {
            background: lightblue;
        }
    </style>
</head>
<body>
    <!-- starševski div mreža -->
    <div class="grid-container">
        <div class="grid-item a">zeleno rumena</div>
        <div class="grid-item b">oranžna</div>
        <div class="grid-item c">roza</div>
        <div class="grid-item d">svetlo modra</div>
    </div>
</body>
</html>

REZULTAT

Podprte vrednosti

auto	Privzeta vrednost, ki poravna element glede na pravila vsebnika (npr. justify-items). Če justify-items ni nastavljeno, deluje kot stretch.
normal	Ni izrecno razloženo v CSS Grid specifikaciji, ampak se pogosto obnaša podobno kot start (odvisno od vsebnika). Podpora je deloma eksperimentalna in ni zanesljiva v vseh brskalnikih.
start	Poravna vsebino na začetek mrežne celice (npr. levo pri vodoravni usmeritvi).
end	Poravna vsebino na konec mrežne celice (npr. desno pri vodoravni usmeritvi).
center	Poravna vsebino na sredino mrežne celice.
stretch	Privzeto obnašanje, kjer se vsebina raztegne, da zapolni širino celice (če širina elementa ni izrecno določena).
inherit	Element podeduje vrednost od starševskega elementa, kjer je justify-items nastavljeno.
initial	Nastavi vrednost na privzeto stanje (auto).

Tukaj so vrednosti, ki se včasih pojavljajo kot možnosti za justify-items, vendar jih večina brskalnikov ne podpira oziroma so del preteklih nestandardnih implementacij ali eksperimentalne funkcije:

left	Ne podpira v CSS Grid standardu. Element nikoli ne bo poravnan na levi strani mrežne celice z uporabo justify-self: left;.
right	Prav tako ni podprt v uradni specifikaciji. Namesto tega uporabimo end.
baseline	Specifikacija CSS Box Alignment določa baseline, vendar ta vrednost ni podprta za justify-self v Grid Layout-u. Morda deluje za vertikalno poravnavo v drugih kontekstih.

Praktična pojasnila za nepodprte vrednosti

Zakaj left in right nista podprta?

left in right nista del standarda v CSS Grid specifikaciji, ker CSS uporablja bolj semantične vrednosti (start in end), kar omogoča boljšo podporo jeziku in kulturnim smerem branja (npr. rtl za jezike, kot je arabščina ali hebrejščina).

Kaj pomeni eksperimentalno za normal?

Specifikacija CSS Box Alignment definira normal, vendar brskalniki nimajo enotne implementacije za justify-self v Grid layout-u. Pogosto se obnaša kot start, vendar je delovanje lahko nezanesljivo, zato se priporoča previdnost.

Kaj pa baseline?

Čeprav je baseline lahko uporabljeno za vertikalno poravnavo (npr. z align-self), preprosto ni del specifikacije za vodoravno poravnavo (z justify-self).

Kaj je priporočljivo uporabiti?

Če želimo ustvariti popolnoma združljivo kodo, uporabimo uradno podprte CSS vrednosti za justify-self:

start (za levo poravnavo)
end (za desno poravnavo)
center (za sredinsko poravnavo)
stretch (za raztezanje vsebine)

Nepodprte vrednosti, kot so left, right ali baseline, se je najbolje izogibati.

Vsi primeri justify-self

auto (Podprto)	Privzeta vrednost.	Glej primer
baseline (Ni podprto)	Specifikacija obstaja, a ne velja za justify-self.	Glej primer
center (Podprto)	Element poravnan na sredino celice.	Glej primer
end (Podprto)	Element poravnan na konec celice.	Glej primer
inherit (Podprto)	Podeduje vrednost starša.	Glej primer
initial (Podprto)	Nastavi vrednost nazaj na auto	Glej primer
left (Ni podprto)	Ne deluje; Uporabi start.	Glej primer
normal (Delno podprto)	Eksperimentalno, ne zanesljivo delovanje v vseh brskalnikih.	Glej primer
right (Ni podprto)	Ne deluje; Uporabi end.	Glej primer
start (Podprto)	Element poravnan na začetek celice.	Glej primer
stretch (Podprto)	Privzeto obnašanje, raztegne element.	Glej primer