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í layoutech.

Specifikace „Box Alignment Module Level 3“ v podstatě vzala všechna zarovnání a rozdělení prostoru definovaná ve flexboxu, něco přidala a zpřístupnila ji 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ů s 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ší vlastnosti 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.

Každou vlastnost si zde můžete rozkliknout a dostat se tak na její specifikaci.

Zarovnání položek (*-items)

Na kontejneru definujeme, jak se budou zarovnávat jednotlivé položky.

Zarovnání samostatné položky (*-self)

Pro konkrétní položku definujeme, jak se bude zarovnávat.

Distribuce prostoru mezi položkami (*-content)

Vlastnosti, které řídí rozdělení volného prostoru, jenž uvnitř kontejneru zůstává mezi položkami.

Změna pořadí (*-content)

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, jež mají slabou podporu.

• 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í IE11, ale zatím bohužel také Safari, což je daleko nepříjemnější. Na druhou stranu, zkratku place-content Safari ovládá, což tuto vlastnost činí použitelnou na většině moderních projektů.
• Vlastnosti gap v grid layoutu umí všechny prohlížeče, kromě IE11, ale v kombinaci s jinými systémy rozvržení je to daleko složitější.
• Vlastnost overflow-position v době psaní textu neumí žá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 to 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.

Konkrétněji o podpoře v prohlížečích píšu v příručkách pro jednotlivé vlastnosti.