Teorie k zarovnání boxů v CSS (Box Alignment Module)

Zde si představíme pár konceptů k CSS Box Alignment Module.

Nebojte se, nebudu to s teorií přehánět. Vybral jsem jen takové části teorie, bez kterých se nemůžete obejít.

Jde o jakousi zobecněnou esenci referenční příručky k jednotlivým vlastnostem. Pokud to tady vstřebáte, nemusíte zase tak moc studovat konkrétní vlastnosti zarovnání boxů v CSS.

Důležité pojmy

Podíváme se na pojmy jako „směr rozvržení“, „kontejner“ a „předmět“ nebo „náhradní řešení zarovnání“.

Směr rozvržení: bloková a řádková osa

Prohlížeče nám při tvorbě běžného layoutu umožňují jen dvourozměrný zážitek, a tak naštěstí zarovnáváme na dvě osy. Vzhledem ke složitosti téhle oblasti v CSS je to moc dobrá zpráva.

Osy pro potřeby layoutu v CSS:

• Hlavní neboli řádková osa (inline axis), ve středoevropských podmínkách obvykle vodorovná.
• Příčná neboli bloková osa (block axis), u nás obvykle svislá.

Osy se nejmenují „vodorovná“ a „svislá“, protože se jejich směr může v různých situacích měnit, když upravíme mód psaní (writing-mode) nebo jazyk dokumentu. Taková arabština nebo některé asijské jazyky se čtou ve zcela odlišných směrech.

Ze stejného důvodu nemůžeme například říci, že zarovnáváme „vlevo nahoru“, ale vždy na začátek nebo na konec určité osy. K tomu se ještě dostaneme.

Předmět a kontejner

Pro potřeby dalších textů budeme ještě potřebovat rozlišit mezi dvěma pojmy:

• Předmět zarovnání (alignment subject) je samotný boxík, který zarovnáváme. Zde mu občas budeme říkat také „položka“.
• Kontejner zarovnání (alignment container) je rámec, ve kterém předmět zarovnáváme. Obvykle jde o rodičovský element.

Náhradní řešení zarovnání

„Fallback alignment“, nebo také náhradní zarovnání řeší situace, kdy nejsou splněny podmínky, které určité zarovnání vyžaduje.

Například pro to, aby vůbec platila hodnota space-between u vlastnosti justify-content (tedy rozprostření volného prostoru spravedlivě mezi položky), je nutné v kontejneru mít více než jeden předmět neboli položku.

Pokud tato podmínka není splněna, specifikace předepisuje jako náhradní řešení hodnotu flex-start nebo start.

To asi dává smysl, že?

Klíčová slova pro zarovnání

Už víme, že vlastnosti CSS Box Alignment je možné dělit podle toho, zda ovlivňují všechny položky, jednu položku, anebo prostor mezi nimi.

Druhý typ rozdělení vlastností pro zarovnávání se zaměřuje nikoliv na vlastnosti, ale jejich hodnoty – klíčová slova.

Poziční zarovnání

Určí polohu položky vzhledem ke kontejneru. (Ve specifikaci je používán pojem „Positional Alignment“.)

Týká se to už uvedených vlastností:

V obecné rovině můžeme použít tyto hodnoty:

• center (použitelné pro -self i -content)
  Centruje předmět doprostřed kontejneru zarovnání.
• start (-self i -content)
  Zarovnává předmět k hraně začátku kontejneru na patřičné ose.
• end (-self i -content)
  Zarovnává předmět k hraně konce kontejneru na patřičné ose.
• self-start (-self)
  Zarovnává předmět k hraně začátku kontejneru, která odpovídá začátku předmětu na patřičné ose.
• self-end (-self)
  Zarovnává předmět k hraně konce kontejneru, která odpovídá konci předmětu na patřičné ose.
• flex-start (-self i -content, jen pro flexbox)
  Totéž jako start, jen pro položky flexboxu. Mimo flexbox se hodnota chová jako start.
• flex-end (-self i -content, jen pro flexbox)
  Totéž jako end, jen pro položky flexboxu. Mimo flexbox se hodnota chová jako end.
• left (jen justify-*)
  Pokud hodnotu použijeme na řádkové ose, chová se jako start.
• right (jen justify-*)
  Pokud hodnotu použijeme na řádkové ose, chová se jako end.

Troufám si tvrdit, že naprostá většina z možností praktického použití CSS Box Alignment se týká právě pozičního zarovnání.

Mrkněme se na jednoduchý příklad. Máme následující HTML připravené pro třísloupcové rozvržení:

<div class="container">
  <div class="item item--1">Item 1</div>
  <div class="item item--2">Item 2</div>
  <div class="item item--3">Item 3</div>
</div>

Layout je s pomocí CSS gridu definovaný následovně:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  height: 5em;
}

Jen pro pořádek: Každá položka layoutu bude mít výšku 5em, spravedlivě si rozdělí prostor (1fr) a mezera mezi nimi bude 1em.

A teď přichází ke slovu ono zarovnání:

.container {
  align-items: start;
}

.item--3 {
  align-self: end;
}

Na nic nečekejme a vše vysvětleme:

• Kontejneru rozvržení (.container) nastavíme po příčné ose (align-) zarovnání všech položek (-items) k horní hraně kontejneru (start). Dohromady tedy align-items:start.
• Třetí položce .item--3 udělíme výjimku. Bude zarovnaná ke spodní hraně kontejneru – align-self:end.

Pokud si to neumíte představit, podívejte se na živý CodePen, ale asi to nebude těžké.

CodePen: vrdl.in/i3v7a

Zarovnání na účaří

Zarovnání na účaří určuje polohu účaří položky nebo skupiny položek tím, že nad ni nebo nad ně přidává vnější okraj.

Zní to asi trochu zašmodrchaně, že? Ještě to chvíli vydržte, ono to není úplně neužitečné.

Při sazbě dokumentů v češtině (nebo jiných evropských jazycích) to funguje jen pro zarovnání položek vedle sebe, kde lze jednotlivá účaří porovnávat. (Ve specifikaci se mluví o „Baseline Alignment“, pokud byste to chtěli hledat.)

Týká se těchto vlastností:

• Zarovnání sebe sama (justify-self, align-self a place-self).
• Distribuce obsahu (justify-content, align-content a place-content).

Můžete použít tyto hodnoty:

• first baseline
  Zarovnání na účaří prvního řádku. Pokud ale v daném kontextu nelze použít, zarovná se jako start.
• last baseline
  Zarovnání na účaří posledního řádku. Pokud ale v daném kontextu nelze použít, zarovná se jako end.
• baseline
  Zkratka pro first baseline.

V demíčku navážeme na strukturu HTML z předchozí ukázky.

Tentokrát ovšem přidáme tuto deklaraci:

.item--2,
.item--3 {
  align-self: baseline;
}

.item--2 {
  padding-top: 3em;
}

Čili:

• Na rozdíl od první položky zarovnáme druhou a třetí na účaří (align-self:baseline).
• Druhé položce přidáme vnitřní okraj (padding-top:3em), takže prohlížeči zkomplikujeme jeho snahu o zarovnání.

CodePen: vrdl.in/9etio

Zarovnání zbylého prostoru

Určuje, co se stane s prostorem, který zbude mezi položkami na řádkové ose. (Ve specifikaci hledejte jako „Distributed Alignment“.)

Týká se to jen vlastností pro nastavení distribuce obsahu, tedy volného místa uvnitř kontejneru – justify-content, align-content a place-content.

Můžete použít tyto hodnoty:

• stretch (výchozí)
  Položky rozšíří své rozměry tak, aby v kontejneru nezbylo žádné volné místo. Pokud jsou položky menší než kontejner, jejich velikost se zvětší rovnoměrně (nikoli proporcionálně), přičemž stále respektují omezení uložená vlastnostmi jako max-width/max-height.
• space-between
  Volné místo se rovnoměrně rozdělí mezi položky, přičemž první a poslední je zarovnaná s hranou kontejneru.
• space-around
  Volné místo se rovnoměrně rozdělí mezi položky a polovina mezery mezi položkami se vloží mezi hrany kontejneru a první a poslední položku.
• space-evenly
  Volné místo se rovnoměrně rozdělí mezi položky i mezi první a poslední položku a okraje kontejneru.

Účinek je možné vidět v ukázce, která využívá stejné HTML jako ty předchozí. CSS jsme změnili, využijeme tentokrát flexbox:

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  width: 100px;
}

CodePen: vrdl.in/f5vsg

Zarovnání pro přetečení (bez podpory prohlížečů)

Jde o vlastnosti a hodnoty, které pomáhají definovat chování prohlížečů, když je předmět zarovnání větší než jeho kontejner.

Co se má stát po přetečení obsahu z kontejneru, definuje vlastnost overflow-position, která má podle specifikace dvě možné hodnoty:

• safe
  Pokud má položka v daném způsobu zarovnání přetéct z obou stran, bude zarovnání změněno takovým způsobem, aby byl vidět začátek položky, například tak, aby bylo možné přečíst začátek textu.
• unsafe
  Vždy dostane přednost poziční zarovnání, bez ohledu na to, zda bude oříznutý obsah čitelný nebo ne.

V době dokončování textu (únor 2022) se zdá, že naše milé prohlížeče se s implementací této vlastnosti úplně nepřetrhnou. Zatím tedy užitečná overflow-position zůstává jen „na papíře“ specifikace od W3C. Dřív to u moderních vlastnostní bylo pravidlem, dnes už naštěstí jen výjimkou, která možná potvrzuje nové pravidlo.

Definování mezer mezi položkami

Vlastnosti a hodnoty umožňují nastavení konzistentní mezery mezi položkami v řádku nebo sloupci a hlavně uvnitř CSS gridu.

Jde o různé varianty vlastnosti gap:

• row-gap – mezera mezi řádky (na blokové ose)
• column-gap – mezera mezi sloupci (na řádkové ose)
• gap – zkratka pro vlastnosti column-gap a row-gap

Dříve se tytéž vlastnosti používaly pod stejnými názvy, jen s prefixem grid- (grid-row-gap, grid-column-gap, grid-gap). Prohlížeče je dodnes umí, jako synonyma pro výše uvedené. Nicméně vám doporučuji řídit se novou verzí specifikace a používat gap, například takto:

.container {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1em 0.5em;
}

Uvedené vytvoří odkaz na mřížku o třech sloupcích a dvou řádcích. Mezery mezi položkami layoutu budou 1em ve svislém směru a 0.5em ve vodorovném. Jako hodnoty bere vlastnost gap všechny možné délkové jednotky a také procenta, přičemž ty se vztahují na délku kontejneru layoutu.