Lekce 18 - Bootstrap - Flex utility

V minulé lekci, Bootstrap - Utility, 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žívaly se triky 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 nimž 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 ně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

V dalším kroku nastavíme směr položek, tedy to, jak se mají poskládat, pokud jich je v kontejneru více. Pokud chceme například vycentrovat jedinou položku v kontejneru, směr určuje, ve kterém směru bude zarovnání probíhat. Pro určení směru používáme následující třídy:

• .flex-row – vodorovný směr (do řádku, zleva doprava), výchozí hodnota, jestliže 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ží tyto třídy:

• .justify-content-start – zarovnání od začátku do konce, výchozí hodnota, jestliže 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 s 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šechny responzivní třídy, 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 třídou .flex-column nastavíme směr hlavní osy na svislý, docílíme zarovnání na výšku:

<body>
   <p>justify-content-start:</p>
   <div class="d-flex flex-column justify-content-start bg-warning" style="height: 250px;">
      <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 flex-column justify-content-end bg-warning" style="height: 250px;">
      <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 flex-column justify-content-center bg-warning" style="height: 250px;">
      <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 flex-column justify-content-between bg-warning" style="height: 250px;">
      <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 flex-column justify-content-around bg-warning" style="height: 250px;">
      <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>
</body>

Zarovnání položek

Zarovnání položek v podstatě znamená zarovnání obsahu po druhé ose. Pokud máme flexbox na řádek, nastavuje zarovnání na výšku, jinak nastavuje zarovnání na šířku. Zarovnání můžeme specifikovat třídami:

• .align-items-stretch – položky se roztáhnou přes výšku/šířku kontejneru, výchozí hodnota, jestliže 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.

Opět máme k dispozici také responzivní třídy:

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

Hodnoty si vyzkoušejme:

<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, lze 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 k dispozici 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ě, a to 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 následující třídy:

• .align-self-stretch – Roztáhne položku po druhé ose, výchozí hodnota, jestliže 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. Použijeme-li u položek jednotný font, třída 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:

• .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 utility podruhé, dokončíme popis flex utilit.