Vlastnost justify-items: Zarovnání všech položek na hlavní ose

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

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.