Vlastnost align-self
určuje zarovnání položky na příčné ose (jinak též blokové ose).
V Grid layoutu se položka zarovnává uvnitř své oblasti, což je obvykle buňka mřížky. Ve rozvržení tvořeném flexboxem jde o zarovnání položky na v celém prostoru příčné osy.
Hodnota auto
u vlastnosti margin
má ostatně před align-self
přednost ve všech systémech rozvržení v CSS.
Vlastnost align-self
je určená pro flexbox, grid, absolutně pozicované prvky, ale ne pro buňky tabulky nebo blokový layout.
Související
Jednoduché příklady
V první ukázce definujeme třísloupcový kontejner Gridu.
Vysvětleme:
- Rodičovský prvek
.container
má nastavenou výšku (height:10em
), abychom viděli efekt zarovnání na blokové ose. - První dvě položky nemají vlastnost
align-self
nastavenou, takže získají výchozí hodnotustretch
a roztáhnou se do celé šířky prostoru buňky. - Poslední položka má nastaveno
align-self:center
, takže by se měla „scvrknout“ na přirozenou výšku podle obsahu a zarovnat doprostřed prostoru buňky, což je zároveň pravá hrana kontejneru. - Vyhrává ovšem deklarace
margin-bottom:auto
, která buňku zarovná na začátek prostoru buňky a funguje tedy stejně jakoalign-self:start
.
V druhé ukázce si pohrajeme s flexboxem:
- Rodičovský kontejner má deklarováno
display:flex
položkyflex:1
, takže se roztáhnou do celé šířky. - Na výšku jsou položky ovlivněné výchozí hodnotou
align-self:stretch
- Třetí položka
.item--3
je pak díkyalign-self:flex-end
zarovnaná ke spodní hraně kontejneru. Jsme ve flexboxu, takže hodnoty jakoend
by zde nezabraly.
Možné hodnoty zarovnání
Také vlastnosti align-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 hodnotaalign-items
od rodičovského elementu. Pokud zde žádný není, dostane prvek hodnotunormal
.normal
V CSS Gridu, flexboxu ale i ve většině systémů pro layout bude nastavený jako hodnotastretch
.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
.left
Chová se jakostart
.right
Chová se jakoend
.flex-start
Zarovná se k horní hraně flexbox kontejneru. Je použitelná jen ve flexboxu.flex-end
Zarovná se ke spodní hraně flexbox kontejneru. Je použitelná jen ve flexboxu.
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
Vlastnost align-self
má prakticky plnou podporu jak pro flexbox, tak pro Grid layout. V Internet Exploreru 11 je ovšem nutné použít prefix -ms-align-self
, což ale doplní Autoprefixer.
Více na caniuse.com/align-self.
Komentáře
Váš názor? Vaše zkušenosti? Našli jste chybu?