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

Modul Box Alignment v CSS specifikuje zarovnání boxů v různých modelech rozvržení CSS: blokovém, tabulkovém, vícesloupcovém, flexboxu nebo Gridu.

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, což nás zajímá hlavně pro potřeby CSS gridu. O tom je tato příručka na Vzhůru dolů.

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ě.

Tahák k CSS Box Alignment

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:

  • Směr zarovnávání (hlavní osa je obvykle vodorovná, jinak též řádková; příčná osa svislá, jinak též bloková).
  • Co budete zarovnávat (všechny položky, jednu položku nebo obsah mezi nimi).
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 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.

Vlastnost Co dělá?
justify-items
Vlastnost justify-items
Zarovnání na řádkové ose (obvykle vodorovně).
Např. justify-items: center centruje všechny položky.
align-items
Vlastnost align-items
Zarovnání na blokové ose (obvykle svisle).
Např. align-items: end zarovná položky ke spodní hraně kontejneru.
place-items
Vlastnost 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.

Vlastnost Co dělá?
justify-self
Vlastnost justify-self
Zarovnání na řádkové ose (obvykle vodorovně).
Např. justify-self: center vodorovně centruje položku.
align-self
Vlastnost align-self
Zarovnání na blokové ose (obvykle svisle).
Např. align-self: end zarovná položku ke spodní hraně.
place-self
Vlastnost 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, který uvnitř kontejneru zůstává mezi položkami.

Vlastnost Co dělá?
justify-content
Vlastnost justify-content
Rozdělení prostoru na řádkové ose (obvykle vodorovně).
Např. justify-content: space-between rozdělí prostor mezi položky.
align-content
Vlastnost 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
Vlastnost place-content
Zkratka pro rozdělení prostoru v obou směrech.
Např. place-content: start space-between zajistí zarovnání položek k horní hraně kontejneru a vodorovné dělení prostoru mezi položky.

Odkazy pro další studium

Na závěr si neodpustím několik odkazů jinam:

Podpora v prohlížečích

Z textu o podpoře CSS layoutu v prohlížečích už víte, že Box Alignment v CSS má dva zádrhele:

  1. Ne všechny vlastnosti je možné použít ve všech systémech layoutu. Například justify-itemsjustify-self nefungují ve flexboxu.
  2. Internet Explorer těch vlastností nepodporuje více, ale je to problematické hlavně u gridu.

Komentáře

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