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.
Související
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).
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 |
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. |
Odkazy pro další studium
Na závěr si neodpustím několik odkazů jinam:
- Specifikace W3C pro CSS Box Alignment Module Level 3 – w3.org/TR/css-align-3
- Ahmad Shaheed: hra „Learn Box Alignment“ – ishadeed.com/article/learn-box-alignment/
- Rachel Andrew: stručný tahák „Box Alignment Cheatsheet“ – rachelandrew.co.uk/css/cheatsheets/box-alignment
Komentáře
Váš názor? Vaše zkušenosti? Našli jste chybu?