Lekce 18 - Bootstrap - Flex utilities

V minulé lekci, Bootstrap - Utilities, jsme si představili všechny utility CSS frameworku Bootstrap kromě těch pro flexbox.

V dnešním a následujícím tutoriálu se budeme intenzivně věnovat flexboxu.

Flex

Příchod Flexboxu do CSS 3 standardu znamenal zásadní změnu toho, jak se elementy pozicují. Není divu, pozicování totiž do té doby nebylo v CSS vůbec vyřešené a veškeré dosavadní způsoby jak na stránce něco poskládat byly pouze hacky. Využívalo se triků jako nastavování elementů tak, aby se vykreslovaly jako tabulky, protože jen tak je šlo vycentrovat na výšku, řešilo se jaký typ elementu chceme vycentrovat na šířku a teprve podle toho jsme zvolili zda mu nastavíme automatický margin nebo jej obalíme do wrapperu.

Těmto temným dnům webdesignu je dnes již ale naštěstí konec. Flexbox dokáže napozicovat a hlavně vycentrovat cokoli na stránce a to jedním univerzálním způsobem. Není divu, že Bootstrap nad ním implementoval spoustu utility tříd, díky kterým můžeme elementy jednoduše pozicovat pouhým nastavením třídy, bez dalšího zbytečného rozumování

Flex kontejner

Základním principem flexboxu je, že aplikujeme vlastnost display: flex ne nějaký kontejner. Tento kontejner následně získá schopnost pozicovat prvky v něm vložené. O pozici prvků se tedy stará kontejner, ne prvky samotné. To je důležitý princip, na kterém celá tato technologie stojí. Kontejner vytvoříme typicky z elementu <div>, kterému přiřadíme třídu .d-flex. Již víme, že písmeno "d" v názvu třídy označuje, že modifikuje CSS vlastnost display. Pro vytvoření inline kontejneru můžeme místo této třídy přiřadit třídu d-inline-flex. Při výchozím chování se položky vkládají zleva doprava a roztáhnou se přes celou výšku kontejneru.

Flex kontejner by mohl vypadat např. takto:

<div class="d-flex"></div>

Pro vytvoření kontejneru můžeme použít i responzivní třídy, ty jsou následující:

• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .d-xl-inline-flex

Směr položek

Jako další krok nastavíme směr položek, tedy jak se mají poskládat, pokud jich je v kontejneru více. Pokud chcete např. jen něco vycentrovat a v kontejneru máte jen jednu položku, směr udává jaký směrem se bude centrovat. Pro určení směru používáme třídy:

• .flex-row - Vodorovný směr (do řádku, zleva doprava), výchozí hodnota když třídu neuvedeme
• .flex-row-reverse - Vodorovný směr pozpátku (do řádku, zprava doleva)
• .flex-column - Svislý směr (do sloupce, shora dolů)
• .flex-column-reverse - Svislý směr pozpátku (do sloupce, zdola nahoru)

Opět můžeme využít i responzivní verze tříd, které dané chování aplikují až od určité velikosti viewportu:

• .flex-row
• .flex-row-reverse
• .flex-column
• .flex-column-reverse
• .flex-sm-row
• .flex-sm-row-reverse
• .flex-sm-column
• .flex-sm-column-reverse
• .flex-md-row
• .flex-md-row-reverse
• .flex-md-column
• .flex-md-column-reverse
• .flex-lg-row
• .flex-lg-row-reverse
• .flex-lg-column
• .flex-lg-column-reverse
• .flex-xl-row
• .flex-xl-row-reverse
• .flex-xl-column
• .flex-xl-column-reverse

Zarovnání obsahu

Poté, co jsme třídou definovali směr hlavní osy, můžeme nastavit jak se má obsah v tomto směru zarovnávat. Jelikož směr může být jak vodorovný tak svislý, místo termínů jako "dolů" nebo "doprava" se zde používají termíny "začátek" a "konec". K nastavení zarovnání slouží třídy:

• .justify-content-start - zarovnání od začátku do konce, výchozí hodnota když třídu neuvedeme
• .justify-content-end - zarovnání od konce do začátku
• .justify-content-center - zarovnání na střed
• .justify-content-between - vyplnění celého prostoru s položkami rovnoměrně rozprostřenými a s položkami po stranách
• .justify-content-around - vyplnění celého prostoru s položkami rovnoměrně rozprostřenými a mezerami po stranách

Hodnoty si vyzkoušejme:

<p>justify-content-start:</p>
<div class="d-flex justify-content-start">
    <div class="bg-success p-2 m-1 text-white">Položka 1</div>
    <div class="bg-success p-2 m-1 text-white">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white">Položka 3</div>
</div>
<p>justify-content-end:</p>
<div class="d-flex justify-content-end">
    <div class="bg-success p-2 m-1 text-white">Položka 1</div>
    <div class="bg-success p-2 m-1 text-white">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white">Položka 3</div>
</div>
<p>justify-content-center:</p>
<div class="d-flex justify-content-center">
    <div class="bg-success p-2 m-1 text-white">Položka 1</div>
    <div class="bg-success p-2 m-1 text-white">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white">Položka 3</div>
</div>
<p>justify-content-between:</p>
<div class="d-flex justify-content-between">
    <div class="bg-success p-2 m-1 text-white">Položka 1</div>
    <div class="bg-success p-2 m-1 text-white">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white">Položka 3</div>
</div>
<p>justify-content-around:</p>
<div class="d-flex justify-content-around">
    <div class="bg-success p-2 m-1 text-white">Položka 1</div>
    <div class="bg-success p-2 m-1 text-white">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white">Položka 3</div>
</div>

Živá ukázka v prohlížeči:

Pokud nastavíme směr hlavní osy na svislý třídou .flex-column, docílíme zarovnání na výšku:

Zarovnání položek

Zarovnání položek není nic jiného, než zarovnání obsahu po druhé ose. Pokud máme flexbox na řádek, nastavuje zarovnání na výšku, jinak nastavuje zarovnání na šířku. Můžeme jej specifikovat třídami:

• .align-items-stretch - položky se roztáhnou přes výšku/šířku kontejneru, výchozí hodnota když třídu neuvedeme
• .align-items-start - zarovnání od začátku do konce
• .align-items-end - zarovnání od konce do začátku
• .align-items-center - zarovnání na střed
• .align-items-baseline - Stejné jako start, ale zarovnává podle řádky textu. Pokud mají položky jinou velikost fontu, budou všechny zarovnány na jednu úroveň za začátek kontejneru.

Máme zde opět i responzivní třídy, to jsou:

• .align-items-sm-start
• .align-items-sm-end
• .align-items-sm-center
• .align-items-sm-baseline
• .align-items-sm-stretch
• .align-items-md-start
• .align-items-md-end
• .align-items-md-center
• .align-items-md-baseline
• .align-items-md-stretch
• .align-items-lg-start
• .align-items-lg-end
• .align-items-lg-center
• .align-items-lg-baseline
• .align-items-lg-stretch
• .align-items-xl-start
• .align-items-xl-end
• .align-items-xl-center
• .align-items-xl-baseline
• .align-items-xl-stretch

Vyzkoušejme si hodnoty:

<p>align-items-stretch:</p>
<div class="d-flex align-items-stretch bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white">Položka 1</div>
    <div class="bg-success p-2 m-1 text-white">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white">Položka 3</div>
</div>
<p>align-items-start:</p>
<div class="d-flex align-items-start bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white">Položka 1</div>
    <div class="bg-success p-2 m-1 text-white">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white">Položka 3</div>
</div>
<p>align-items-end:</p>
<div class="d-flex align-items-end bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white">Položka 1</div>
    <div class="bg-success p-2 m-1 text-white">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white">Položka 3</div>
</div>
<p>align-items-center:</p>
<div class="d-flex align-items-center bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white">Položka 1</div>
    <div class="bg-success p-2 m-1 text-white">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white">Položka 3</div>
</div>
<p>align-items-baseline:</p>
<div class="d-flex align-items-baseline bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white">Položka 1</div>
    <div class="bg-success p-2 m-1 text-white">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white">Položka 3</div>
</div>

Výsledek v prohlížeči:

Zarovnání samozřejmě můžeme kombinovat, můžeme tedy zarovnat na střed jak svisle, tak vodorovně:

<div class="d-flex align-items-center justify-content-center bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white">Položka 1</div>
    <div class="bg-success p-2 m-1 text-white">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white">Položka 3</div>
</div>

Výsledek:

Align self

Aby zarovnání nebylo málo, máme zde ještě třetí Align-self, jak již název napovídá, neurčuje jak jsou položky zarovnané vůči kontejneru, ale jak jsou zarovnané vůči sobě, v každém řádku nebo sloupci kontejneru. Příslušné třídy přiřazujeme přímo položkám kontejneru, nikoli kontejneru samotnému jako v předchozích případech.

Můžeme přiřadit třídy:

• .align-self-stretch - Roztáhne položku po druhé ose, výchozí hodnota když třídu neuvedeme.
• .align-self-start - Zarovná položku na začátek druhé osy řádku/sloupce.
• .align-self-end - Zarovná položku na konec druhé osy řádku/sloupce.
• .align-self-center - Zarovná položku na střed druhé osy řádku/sloupce.
• .align-self-baseline - Zarovná položku na začátek druhé osy řádku/sloupce, podle základní linky textu. Pokud použijeme u položek jednotný font, funguje jako .align-self-start. Pokud zvolíme jinak velké písmo, budou všechny položky zarovnány na jednu úroveň za začátek druhé osy řádku/sloupce.

Responzivní varianty tříd jsou:

• .align-self-sm-start
• .align-self-sm-end
• .align-self-sm-center
• .align-self-sm-baseline
• .align-self-sm-stretch
• .align-self-md-start
• .align-self-md-end
• .align-self-md-center
• .align-self-md-baseline
• .align-self-md-stretch
• .align-self-lg-start
• .align-self-lg-end
• .align-self-lg-center
• .align-self-lg-baseline
• .align-self-lg-stretch
• .align-self-xl-start
• .align-self-xl-end
• .align-self-xl-center
• .align-self-xl-baseline
• .align-self-xl-stretch

<p>align-self-stretch:</p>
<div class="d-flex bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white align-self-stretch">Položka 1</div>
    <div class="bg-success p-2 m-1 text-white">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white">Položka 3</div>
</div>
<p>align-self-start:</p>
<div class="d-flex bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white align-self-start">Položka 1</div>
    <div class="bg-success p-2 m-1 text-white">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white">Položka 3</div>
</div>
<p>align-self-end:</p>
<div class="d-flex bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white align-self-end">Položka 1</div>
    <div class="bg-success p-2 m-1 text-white">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white">Položka 3</div>
</div>
<p>align-self-center:</p>
<div class="d-flex bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white align-self-center">Položka 1</div>
    <div class="bg-success p-2 m-1 text-white">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white">Položka 3</div>
</div>
<p>align-self-baseline:</p>
<div class="d-flex bg-warning" style="height: 85px;">
    <div class="bg-success p-2 m-1 text-white align-self-baseline">Položka 1</div>
    <div class="bg-success p-2 m-1 text-white">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white">Položka 3</div>
</div>

Živá ukázka:

Míchání flexboxu s margin:auto

Pokud nastavíme nějakému elementu ve flex kontejneru margin-{nějaká-strana}: auto, odstaví se všechny další prvky na konec dané strany. Pokud tedy např. přiřadíme elementu třídu .mr-auto (nastavující pravý margin na hodnotu auto) a kontejner bude řádkový a se zarovnáním na začátek, zobrazí se všechny následující elementy přilepené na pravém okraji. Podobného chování můžeme docílit i ve sloupcovém kontejneru nastavením hodnoty auto hornímu nebo dolnímu marginu, což má za následek odsunutí následujících položek na tuto stranu.

<div class="d-flex bg-warning">
    <div class="bg-success p-2 m-1 text-white">Položka 1</div>
    <div class="mr-auto bg-success p-2 m-1 text-white">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white">Položka 3</div>
</div>
<br />
<div class="d-flex flex-column bg-warning" style="height: 250px;">
    <div class="bg-success p-2 m-1 text-white">Položka 1</div>
    <div class="mt-auto bg-success p-2 m-1 text-white">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white">Položka 3</div>
</div>

Výsledek:

V příští lekci, Bootstrap - Flex utilities podruhé, dokončíme popis flex utilities.