Zarovnání boxů v CSS: Příručka pro všechny vlastnosti Box Alignment Module

„Box Alignment“ je modul specifikace CSS, který definuje zarovnání boxů v různých modelech rozvržení CSS: blokovém, tabulkovém, vícesloupcovém, flexboxu nebo gridu.

V tomto textu se podíváme na jednotlivé vlastnosti pro zarovnávání layoutů. Specifikace „Box Alignment Module Level 3“ v podstatě převzala všechna zarovnání a rozdělení prostoru definovaného ve flexboxu, něco přidala a zpřístupnila je ostatním systémům pro layout.

Nijak se zde nezabýváme zarovnáváním textu (vlastnosti jako text-align, vertical-align) ani staršími (ale stále funkčními) metodami zarovnávání boxů pomocí margin a tak dále.

Rychlý tahák k vlastnostem

Vlastností, které obstarávají zarovnávání v CSS, je na jednu webařskou hlavu opravdu hodně. Naštěstí jsou ale ty nejdůležitější z nich pojmenované podle jednoduchého klíče.

Než vyberete tu správnou, musíte si ujasnit:

1. Směr zarovnávání (hlavní osa je obvykle vodorovná, jinak též řádková; příčná osa svislá, jinak též bloková). Na obrázku výše se podívejte k šipkám.
2. Co budete zarovnávat (všechny položky, jednu položku, nebo obsah mezi nimi). Na obrázku výše se podívejte do layoutu.

Jen připomínám, že směr hlavní a příčné osy rozvržení se může změnit – například pomocí vlastnosti flex-direction nastavené na column.

V tabulce nejsou obsaženy zdaleka všechny zarovnávací vlastnosti, na ty se pojďme podívat hned v další části textu.

Jak si zapamatovat správný směr?

Docela dlouho se trápím s tím, jak si bez taháku zapamatovat správný směr zarovnání. „Justify“ je totiž většinou vodorovný, „align“ pak svislý směr.

Na asi nejlepší trik mě v jedné diskuzi přivedl David Grudl. Přitom je to tak prosté, podívat se do anglicko-českého slovníku:

• „justify“ znamená „zarovnat“ (text)
• „align“ znamená „srovnat“ (do roviny)

Další mnemotechnickou pomůckou může být, že „justify“ je typ zarovnání, který se vždy používá pro text, tedy u nás vodorovný směr.

Musíme ovšem zapomenout na to, že nejen různé textové editory, ale i samotné CSS (text-align) nás to léta učily špatně.

Některé zarovnávací vlastnosti nefungují ve flexboxu

Vlastnosti justify-items i justify-self nejsou dostupné pro layouty tvořené flexboxem.

Namísto justify-items můžeme použít starý dobrý margin nebo pro centrování třeba justify-content. Stejně tak nebudou fungovat zkratky place-items a place-self.

Podpora v prohlížečích

Na úrovni celé této velké specifikace je těžké mluvit o podpoře či nepodpoře. Různé prohlížeče mohou nepodporovat některé vlastnosti, některé mohou nepodporovat zase určité hodnoty nebo jejich kombinaci s různými systémy rozvržení, jako je grid, flexbox nebo vícesloupcový layout.

Toto řešíme v textech příručky k jednotlivým vlastnostem. Zde se ale zaměřme na konkrétní zásadnější nedostatky v podpoře.

• Internet Explorer 11 – pokud ještě musíte podporovat tento prehistorický prohlížeč, je třeba vědět, že vlastnosti pro zarovnání umí jen v kombinaci s flexboxem, nikoliv gridem.
• Zkratky jako place-self neumí MSIE 11, ale zatím bohužel také Safari, což je daleko nepříjemnější. Na druhou stranu, zkratku place-content Safari ovládá, takže tato vlastnost je použitelná ve většině moderních projektů.
• Vlastnosti gap v layoutu tvořeném gridem a flexboxem umí všechny prohlížeče, kromě MSIE 11, ale v kombinaci s vícesloupcovým layoutem to je složitější.
• Vlastnost overflow-position neumí v době psaní textu žádný prohlížeč.

Aby vás to ale neodradilo – celkově vzato jde o část CSS s velmi dobrou podporou a není nutné moc dumat, zda ji jako celek používat nebo ne. Prostě to používejte. Nic jiného vám stejně nezbývá, pokud chcete vytvářet nějaké ty layouty.