Vlastnost align-content: Rozdělení prostoru mezi položkami na příčné ose

Vlastnost align-content definuje, jak prohlížeč distribuuje prostor mezi položkami obsahu podél příčné (nebo blokové) osy kontejneru layoutu.

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 zase stretch.

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 jako max-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 jako start, použitelné hlavně ve flexboxu.
• flex-end
  Chová se jako end, 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 jako start.
• last baseline
  Zarovnání na účaří posledního řádku. Pokud v daném kontextu nelze použít, zarovná se jako end.
• baseline
  Zkratka pro first 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.