Vlastnost align-items
na kontejneru layoutu definuje zarovnání položek na příčné ose (jinak též blokové ose) pro layouty v CSS.
Nastavuje výchozí hodnotu align-self
pro všechny položky uvnitř kontejneru.
Tuhle vlastnost není možné aplikovat na blokové elementy nebo na buňky tabulek.
Související
Jednoduchý příklad
V naší ukázce definujeme třísloupcový kontejner Gridu. Všechny tři položky mají omezenou výšku i šířku, aby byl hezky vidět efekt zarovnání, který způsobuje vlastnost align-items
.
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í)
Ve většině systémů layoutu, včetně Gridu nebo flexboxu, bude nastavený jako hodnotastretch
, kterou popisujeme níže.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 jakomax-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.flex-start
Hodnota chová jakostart
.flex-end
Hodnota chová 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
Stav k srpnu 2020:
- V rámci flexboxového layoutu nefungují ve většině prohlížečů s výjimkou Firefoxu hodnoty
left
,right
,safe
,unsafe
,start
aend
. V IE11 navíc nefungují ani dvojslovné pojmenování pro zarovnání na účaří:first baseline
nebolast baseline
. - V rámci rozvržení pomocí Gridu tuto vlastnost nepodporuje jen IE11, ale tam by podporu této vlastnosti měl nahrazovat Autoprefixer.
Pro více informací se podívejte na caniuse.com/align-items.
Komentáře
Váš názor? Vaše zkušenosti? Našli jste chybu?