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 tutoriálu CSS frameworku Bootstrap se začneme intenzivně věnovat flexboxu. Naučíme se používat směry a různá zarovnání.

Flex v Bootstrapu

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.

Flex kontejner

Základním principem flexboxu je, že aplikujeme vlastnost display: flex na 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 vypadá například takto:

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

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

• .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,
• .d-xxl-flex,
• .d-xxl-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 chceme například jen něco vycentrovat a v kontejneru máme 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,
• .flex-xxl-row,
• .flex-xxl-row-reverse,
• .flex-xxl-column,
• .flex-xxl-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,
• .justify-content-evenly - vyplnění celého prostoru s položkami rovnoměrně rozprostřenými a se stejnými rozestupy mezi položkami i na okrajích kontejneru.

Opět zde máme možnost využít všech responzivních tříd jako je například .justify-content-sm-start a tak dále.

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>
<p>justify-content-evenly:</p>
<div class="d-flex justify-content-evenly">
    <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,
• .align-items-xxl-start,
• .align-items-xxl-end,
• .align-items-xxl-center,
• .align-items-xxl-baseline,
• .align-items-xxl-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,
• .align-self-xxl-start,
• .align-self-xxl-end,
• .align-self-xxl-center,
• .align-self-xxl-baseline,
• .align-self-xxl-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-top: auto nebo margin-bottom: auto, odstaví se všechny další prvky na konec dané strany:

<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.