Martin Michálek Martin Michálek  – 4. 12. 2020

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

CSS vlastnost align-content

Vlastnost align-content patří do specifikace pro zarovnání boxů – CSS Box Alignment.

Ve specifikaci se počítá s použitím pro flexbox, grid, vícesloupcový layout, ale taky pro blokové prvky.

Tato vlastnost nemá pochopitelně vliv na jednořádkové flexboxové kontejnery (tj. kontejnery s flex-wrap:nowrap).

Jednoduchý příklad

V naší ukázce definujeme třísloupcový kontejner gridu. Jeho položky jsme ale, my zlí experimentátoři, přinutili, aby držely minimální a maximální šířku – pomocí minmax(3em, 5em).

Můžete si vyzkoušet ještě jedno demo. Je totožné, jen tentokrát pro flexbox.

Deklarace align-content:space-between tedy zajistí rozdělení volného prostoru takovým způsobem… Ale vy 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í

Hodnoty vlastnosti align-content

Vlastnosti align-self 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.

Pokud vím, v žádném prohlížeči toto zatím nefunguje.

Podpora v prohlížečích

V layoutech postavených na gridu je u základních hodnot vlastnost plně podporována s výjimkou IE11. U flexboxu situaci popisujeme u jednotlivých vlastností.

Více na caniuse.com/justify-content.

Komentáře

Váš názor? Vaše zkušenosti? Našli jste chybu?