Martin Michálek  – 7. 11. 2021

Vlastnost justify-items definuje na kontejneru layoutu zarovnání položek na hlavní (jinak též řádkové) ose.

Vlastnost justify-items patří do specifikace pro zarovnání boxů – CSS Box Alignment.

Je použitelná uvnitř layoutů dělaných gridem.

Můžete také použít zkratku place-items.

Příklad s gridem

V naší ukázce definujeme třísloupcový kontejner gridu.

HTML:

<div class="container">
  <div class="item item--1">
    Item 1
  </div>
  <div class="item item--2">
    Item 2
  </div>
  <div class="item item--3">
    Item 3
  </div>  
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: end;
}

Všechny tři položky mají omezenou výšku i šířku, aby byl hezky vidět efekt zarovnání:

.item {  
  height: 5em;
  min-width: 5em;
}

Vlastnost justify-items zde tedy zarovnává položky na hlavní (vodorovné) ose do prostoru, který je jim vymezený (1fr, tedy jeden podíl na celku). Hodnota end je umístí ke konci onoho vymezeného prostoru.



Trochu teorie: nastavení justify-self a proč ve flexboxu vlastnost nefunguje

Vlastnost justify-items vlastně nedělá nic jiného než, že nastavuje výchozí hodnotu vlastnosti justify-self pro všechny položky uvnitř kontejneru.

Je dobré zmínit, že ve flexbox layoutu a uvnitř buněk tabulek je vlastnost justify-items ignorována.

U flexboxu můžeme pro zarovnání položek na hlavní ose využít klasickou metodu s margin:auto, ale justify-items zde nerozchodíme. V další ukázce je vidět, že ve flexboxovém layoutu je deklarace justify-items:end ignorována.



Možné hodnoty zarovnání

Vlastnosti justify-items můžete předávat všechny hodnoty z jednotlivých obecných kategorií klíčových slov:

Základní

  • normal (výchozí)
    V gridu bude nastavený jako hodnota stretch, kterou popisujeme níže.
  • auto
    Podědí se hodnota justify-items od rodičovského elementu. Pokud zde žádný není, dostane prvek hodnotu normal, tedy stretch.
  • stretch
    Položky rozšíří své rozměry tak, aby v kontejneru nezbylo žádné volné místo. Pokud jsou položky menší než kontejner, jejich velikost se zvětší rovnoměrně (nikoli proporcionálně), přičemž stále respektují omezení uložená vlastnostmi jako max-width/max-height.

Poziční

  • center
    Centruje všechny položky doprostřed kontejneru zarovnání.
  • start
    Zarovnává všechny položky k hraně začátku kontejneru.
  • end
    Zarovnává všechny položky k hraně konce kontejneru.
  • self-start
    Zarovnává všechny položky k hraně začátku kontejneru, která odpovídá začátku předmětu.
  • self-end
    Zarovnává všechny položky k hraně konce kontejneru, která odpovídá konci předmětu.
  • flex-start
    Hodnota chová jako start.
  • flex-end
    Hodnota chová jako end.
  • left
    Chová se jako start.
  • right
    Chová se jako end.

Podle účaří

  • first baseline
    Zarovnání na účaří prvního řádku. Pokud v daném kontextu nelze použít, zarovná se jako start.
  • last baseline
    Zarovnání na účaří posledního řádku. Pokud v daném kontextu nelze použít, zarovná se jako end.
  • baseline
    Zkratka pro first baseline.

V době psaní toto funguje jen ve Firefoxu a můžete si to v tomto prohlížeči zkusit na následující ukázce.



Pro přetečení

  • safe
    Pokud má položka v daném způsobu zarovnání přetéct z obou stran, bude zarovnání změněno tak, aby byl vidět začátek položky, takže aby například bylo možné přečíst začátek textu.
  • unsafe
    Vždy dostane přednost poziční zarovnání, bez ohledu na to, zda bude oříznutý obsah čitelný nebo ne.

Pokud vím, v žádném prohlížeči ale toto zatím nefunguje.

V následující živé ukázce je možné vyzkoušet několik hodnot:

  • výchozí stretch (roztažení),
  • end (zarovnání na konec vymezeného prostoru),
  • left (obdobu start tedy zarovnání na začátek vymezeného prostoru),
  • center (zarovnání doprostřed vymezeného prostoru).


Podpora v prohlížečích

Jak už padlo, ve flexboxových layoutech je vlastnost justify-items ignorována, takže můžeme i bez nadsázky říct, že ji při použití display:flex podporují úplně všechny prohlížeče, které kdy vznikly.

Ale vážněji:

  • Zarovnání pro přetečení (safe) nepodporuje žádný prohlížeč.
  • Zarovnání na účaří podporuje jen Firefox.
  • Vlastnost nepodporuje Internet Explorer 11.

Ta podstatná sada hodnot je v moderních prohlížečích podporována, takže se vlastnosti justify-items nebojte.

Více na caniuse.com/justify-items.