justify-items
Zarovnání na řádkové ose (obvykle vodorovně).
Např. justify-items:center centruje všechny položky.
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.
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.
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.
gap
Definice mezery mezi buňkami.
gap:1rem;
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 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:
- 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
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:
- Ne všechny vlastnosti je možné použít ve všech systémech layoutu. Například
justify-itemsajustify-selfnefungují ve flexboxu. - 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?