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.

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.

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.

gap

CSS vlastnost gap

Definice mezery mezi buňkami.
gap:1rem;

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 zarovná položky k horní hraně a vodorovné dělí prostor.

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?