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

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

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

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

Vlastnost	Co dělá?
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, který uvnitř kontejneru zůstává mezi položkami.

Vlastnost	Co dělá?
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 zajistí zarovnání položek k horní hraně kontejneru a vodorovné dělení prostoru mezi položky.

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-items a justify-self nefungují ve flexboxu.
2. Internet Explorer těch vlastností nepodporuje více, ale je to problematické hlavně u gridu.