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á?
Vlastnost justify-items justify-items Zarovnání na řádkové ose (obvykle vodorovně).
Např. justify-items: center centruje všechny položky.
Vlastnost align-items align-items Zarovnání na blokové ose (obvykle svisle).
Např. align-items: end zarovná položky ke spodní hraně kontejneru.
Vlastnost place-items 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á?
Vlastnost justify-self justify-self Zarovnání na řádkové ose (obvykle vodorovně).
Např. justify-self: center vodorovně centruje položku.
Vlastnost align-self align-self Zarovnání na blokové ose (obvykle svisle).
Např. align-self: end zarovná položku ke spodní hraně.
Vlastnost place-self 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á?
Vlastnost justify-content justify-content Rozdělení prostoru na řádkové ose (obvykle vodorovně).
Např. justify-content: space-between rozdělí prostor mezi položky.
Vlastnost align-content align-content Rozdělení prostoru na blokové ose (obvykle svisle).
Např. align-content: start zajistí zarovnání položek k horní hraně kontejneru.
Vlastnost place-content 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:

Komentáře

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

Dotazník: Jak
se vzděláváte online?
5 minut vašeho času.
Velká pomoc pro nás.
Vyplnit →