Vlastnost align-content
definuje, jak prohlížeč distribuuje prostor mezi položkami obsahu podél příčné (nebo blokové) osy kontejneru layoutu.
Vlastnost align-content
patří do specifikace pro zarovnání boxů – CSS Box Alignment.
Počítá se však s použitím pro flexbox, grid, ale také vícesloupcový layout.
Ve specifikaci se počítá s použitím pro flexbox, grid, vícesloupcový layout, ale taky pro blokové prvky, kde to ale zatím použít nejde.
Tato vlastnost zarovnává ve svislém směru a tak nemá pochopitelně vliv na jednořádkové flexboxové kontejnery (tj. kontejnery s flex-wrap:nowrap
).
Jednoduchý příklad
V naší ukázce definujeme třířádkový kontejner gridu:
<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>
.container {
display: grid;
grid-template-rows: repeat(3, 3em);
height: 12em;
align-content: space-between;
}
Pomocí zápisu align-content:space-between
se volný prostor hezky distribuuje na výšku mezi jednotlivé položky.
Můžete si vyzkoušet ještě jedno demo. Je totožné, jen tentokrát pro flexbox a jinou hodnotu align-content
.
CSS:
.container {
border: 5px solid black;
display: flex;
flex-wrap: wrap;
height: 12em;
align-content: space-around;
}
Zápis align-content:space-around
tedy rozdělí volný prostor na polovinu a přidá ji před a za buňku.
Víte, co? Raději se podívejte na na všechny možné hodnoty, i tuhle mezi nima najdete.
Možné hodnoty zarovnání
Vlastnosti align-content
můžete předávat všechny hodnoty z jednotlivých obecných kategorií klíčových slov:
Základní
normal
(výchozí)
V CSS gridu odpovídat hodnotěstart
, ve flexboxu zasestretch
.
Zbylý prostor
space-between
Volné místo se rovnoměrně rozdělí mezi položky, přičemž první a poslední je zarovnaná s hranou kontejneru.space-around
Volné místo se rovnoměrně rozdělí mezi položky a polovina mezery mezi položkami se vloží mezi hrany kontejneru a první a poslední položku.space-evenly
Volné místo se rovnoměrně rozdělí mezi položky i mezi první a poslední položku a okraje kontejneru. Tato vlastnost není v kombinaci s flexboxem podporována v IE11.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
. Tato vlastnost není v kombinaci s flexboxem podporována v IE11.
Poziční
center
Položky se centrují doprostřed kontejneru.start
Položky se zarovnají k hraně začátku kontejneru, nefunguje ve flexboxu.end
Položky se zarovnají k hraně konce kontejneru, nefunguje ve flexboxu.flex-start
Chová se jakostart
, použitelné hlavně ve flexboxu.flex-end
Chová se jakoend
, použitelné hlavně 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
.
Tyto hodnoty zatím nemají u této vlastnost dobrou podporu v prohlížečích při použití ve flexboxu. V IE není podporována vůbec.
Zarovnání 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 době psaní podporuje jen Firefox.
Podpora v prohlížečích
V layoutech postavených na gridu je vlastnost u základních hodnot plně podporována s výjimkou IE11. Použitím nástroje Autoprefixer je ale možné to dohnat.
Ve flexboxových rozvrženích justify-content
dobře funguje i v Internet Exploreru.
Více na CanIUse.com. caniuse.com/align-content.
Komentujte
Našli jste chybu? Chcete doplnit svůj pohled?
Pište: [email protected]
Sdílení potěší: