Vlastnost justify-self
určuje zarovnání položky na hlavní ose (jinak též řádkové ose).
Je dobré zmínit, že ve flexbox layoutu a uvnitř buněk tabulek je vlastnost justify-self
ignorována. V Grid layoutu se položka zarovnává uvnitř své oblasti, což je obvykle buňka mřížky.
U flexboxu můžeme pro zarovnání položek na hlavní ose využít klasickou metodu s margin:auto
, podobně jako u justify-items
. Hodnota auto
u vnějších okrajů má ostatně před touto justify-self
přednost ve všech systémech rozvržení v CSS.
Související
Jednoduchý příklad
V naší ukázce definujeme třísloupcový kontejner Gridu.
Následuje několik užitečných vysvětlovacích odrážek:
- První dvě položky nemají vlastnost
justify-self
nastavenou, takže získají výchozí hodnotustretch
a roztáhnou se do celé šířky prostoru buňky. - Poslední položka má nastaveno
justify-self:end
, takže by se měla „scvrknout“ na přirozenou šířku podle obsahu a zarovnat ke konci prostoru buňky, což je zároveň pravá hrana kontejneru. - Vyhrává ovšem deklarace
margin-right:auto
, která buňku zarovná na začátek prostoru buňky a funguje tedy stejně jakojustify-self:end
.
Možné hodnoty zarovnání
Vlastnosti justify-self
můžete předávat všechny hodnoty z jednotlivých obecných kategorií klíčových slov:
Základní
auto
(výchozí)
Podědí se hodnotajustify-items
od rodičovského elementu. Pokud zde žádný není, dostane prvek hodnotunormal
.normal
V CSS Gridu bude nastavený jako hodnotastretch
, ale například v blokových layoutech (display:block
) jakostart
.stretch
Položka 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 jakomax-width
/max-height
.
Poziční
center
Položka se centruje doprostřed jí určeného prostoru.start
Položka se zarovnává k hraně začátku jí určeného prostoru.end
Položka se zarovnává k hraně konce jí určeného prostoru.self-start
Hodnota chová jakostart
.self-end
Hodnota chová jakoend
.flex-start
Chová se jakostart
.flex-end
Chová se jakoend
.left
Chová se jakostart
.right
Chová se jakoend
.
Podle účaří
first baseline
Zarovnání na účaří prvního řádku. Pokud v daném kontextu nelze použít, zarovná se jakostart
.last baseline
Zarovnání na účaří posledního řádku. Pokud v daném kontextu nelze použít, zarovná se jakoend
.baseline
Zkratka profirst baseline
.
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 toto zatím nefunguje.
Podpora v prohlížečích
Jak už padlo, ve flexboxových layoutech je vlastnost justify-self
ignorována, takže i tady můžeme říct, že ji při použití display:flex
podporují (ale neaplikují) úplně všechny prohlížeče.
Při použití display:grid
zde máme tradiční výjimku – Internet Explorer 11.
Více na caniuse.com/justify-self.
Komentáře
Váš názor? Vaše zkušenosti? Našli jste chybu?