Martin Michálek  – 4. 12. 2020

„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.
Hlavní osa (justify-*) Příčná osa (align-*)
Zarovnání položek (*-items) justify-items align-items
Zarovnání sebe sama (*-self) justify-self align-self
Distribuce obsahu (*-content) justify-content align-content

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.

justify-items

Zarovnání na řádkové ose (obvykle vodorovně).
Např. justify-items:center centruje všechny položky.

align-items

Zarovnání na blokové ose (obvykle svisle).
Např. align-items:end zarovná položky ke spodní hraně kontejneru.

place-items

Zkratka pro zarovnání položek v obou směrech.
Např. place-items:end center zarovná položky ke spodní hraně a vodorovně na střed.

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

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

justify-self

Zarovnání na řádkové ose (obvykle vodorovně).
Např. justify-self:center vodorovně centruje položku.

align-self

Zarovnání na blokové ose (obvykle svisle).
Např. align-self:end zarovná položku ke spodní hraně.

place-self

Zkratka pro zarovnání jednotlivé položky v obou směrech.
Např. place-self:end center zarovná položku ke spodní hraně a vodorovně doprostřed.

Distribuce prostoru mezi položkami (*-content)

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

gap

Definice mezery mezi buňkami.
Např. gap:1rem definuje mezeru `1rem` v obou směrech.

justify-content

Rozdělení prostoru na řádkové ose (obvykle vodorovně).
Např. justify-content:space-between rozdělí prostor mezi položky.

align-content

Rozdělení prostoru na blokové ose (obvykle svisle).
Např. align-content:start zajistí zarovnání položek k horní hraně kontejneru.

place-content

Zkratka pro rozdělení prostoru v obou směrech.
Např. place-content:start space-between zarovná položky k horní hraně a vodorovné dělí prostor.

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

order

Změna pořadí prvků layoutu.
Např. order:-1 přesune položku před všechny ostatní.

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.

Odkazy pro další studium

Udělal jsem maximum pro to, aby vám tento průvodce vystačil a jiné zdroje jste hledat nemuseli. Přesto si neodpustím několik odkazů jinam: