Vlastnost justify-self
určuje zarovnání položky na hlavní ose (jinak též řádkové ose).
Vlastnost justify-self
patří do specifikace pro zarovnání boxů – CSS Box Alignment.
Můžete ji využít v layoutech tvořených gridem.
Je dobré zmínit, že uvnitř buněk tabulek a ve flexboxu 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
.
Příklad: margin
má přednost před justify-self
V naší ukázce definujeme třísloupcový kontejner gridu. Poslední, jinak zbarvenou položku pak zarovnáváme pomocí justify-self
.
HTML vám asi bude znít povědomě:
<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>
Definice třísloupcového kontejneru gridu pak vypadá zhruba následovně:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
height: 10em;
}
Nakonec deklarace pro poslední položku:
.item--3 {
margin-right: auto;
justify-self: end;
}
Tady vlastně zarovnáváme dvěma způsoby. Jednou doleva (margin-right:auto
) a jednou doprava (justify-self:end
). Co myslíte - bude platit poslední deklarace, jako je tomu u CSS vždy? Nikoliv, zarovnání pomocí vnějších okrajů zde má přednost navzdory kaskádě.
Zkuste si tu první deklaraci schválně v živé ukázce odmazat.
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
.
Příklad: ve flexboxu to nefunguje
V dalším CodePenu je vidět, že justify-self
ve flexboxu opravu nefunguje. Pokouším se tam stylovat poslední položku pomocí justify-self:end
. A nic.
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 specifikace CSS Box Alignment:
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
.
Po dekódování zašmodrchaností specifikace můžeme konstatovat, že výchozí hodnota je vždy stretch
, tedy roztažení do šířky.
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.
Toto v žádném prohlížeči zatím nefunguje.
Podpora v prohlížečích
V rámci flexboxu a tabulkovém layoutu tuto vlastnost nemůžete použít v žádném prohlížeči.
Při použití s display:grid
je podpora v prohlížečích plná, jen v Internet Exploreru je hlášeno několik bugů. Více na CanIUse. caniuse.com/justify-self
Komentujte
Našli jste chybu? Chcete doplnit svůj pohled?
Pište: [email protected]
Sdílení potěší: