justify-items
Zarovnání na řádkové ose (obvykle vodorovně).
Např. justify-items:center
centruje všechny položky.
„Box Alignment“ je modul specifikace CSS, který definuje zarovnání boxů v různých modelech rozvržení CSS: blokovém, tabulkovém, vícesloupcovém, flexboxu nebo gridu.
V tomto textu se podíváme na jednotlivé vlastnosti pro zarovnávání layoutech.
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.
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.
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:
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 rozvržení 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.
*-items
)Na kontejneru definujeme, jak se budou zarovnávat jednotlivé položky.
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.
*-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.
*-content
)Vlastnosti, které řídí rozdělení volného prostoru, jenž uvnitř kontejneru zůstává mezi položkami.
gap
Definice mezery mezi buňkami.
Např. gap:1rem
definuje mezeru `1rem` v obou směrech.
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.
*-content
)order
Změna pořadí prvků layoutu.
Např. order:-1
přesune položku před všechny ostatní.
Na úrovni celé této velké specifikace je těžké mluvit o podpoře či nepodpoře. Různé prohlížeče mohou nepodporovat některé vlastnosti, některé mohou nepodporovat zase určité hodnoty nebo jejich kombinaci s různými systémy rozvržení, jako je grid, flexbox nebo vícesloupcový layout.
Toto řešíme v textech příručky k jednotlivým vlastnostem. Zde se ale zaměřme na konkrétní zásadnější nedostatky v podpoře, jež mají slabou podporu.
place-self
neumí IE11, ale zatím bohužel také Safari, což je daleko nepříjemnější. Na druhou stranu, zkratku place-content
Safari ovládá, což tuto vlastnost činí použitelnou na většině moderních projektů.gap
v grid layoutu umí všechny prohlížeče, kromě IE11, ale v kombinaci s jinými systémy rozvržení je to daleko složitější.overflow-position
v době psaní textu neumí žádný prohlížeč.Aby vás to ale neodradilo – celkově vzato jde o část CSS s velmi dobrou podporou a není nutné moc dumat, zda to jako celek používat nebo ne. Prostě to používejte. Nic jiného vám stejně nezbývá, pokud chcete vytvářet nějaké ty layouty.
Konkrétněji o podpoře v prohlížečích píšu v příručkách pro jednotlivé vlastnosti.
Udělal jsem maximum pro to, aby vám tento průvodce vystačil a jiné zdroje jste hledat nemuseli. Přesto si neodpustím několik odkazů jinam:
Komentujte
Našli jste chybu? Chcete doplnit svůj pohled?
Pište: [email protected]
Sdílení potěší: