18. diel - Bootstrap - Flex utilities

V minulej lekcii, Bootstrap - Utilities, sme si predstavili všetky utility CSS frameworku Bootstrap okrem tých pre flexbox.

V dnešnom tutoriáli CSS frameworku Bootstrap sa začneme intenzívne venovať flexboxu. Naučíme sa používať smery a rôzne zarovnania.

Flex v Bootstrape

Príchod Flexboxu do CSS 3 štandardu znamenal zásadnú zmenu toho, ako sa elementy pozíciujú. Niet divu, pozíciovanie totiž do tej doby nebolo v CSS vôbec vyriešené a všetky doterajšie spôsoby ako na stránke niečo poskladať boli iba hacky. Využívalo sa triky ako nastavovanie elementov tak, aby sa vykresľovali ako tabuľky, pretože len tak ich šlo vycentrovať na výšku. Riešilo sa aký typ elementu chceme vycentrovať na šírku a až podľa toho sme zvolili či mu nastavíme automatický margin alebo ho obalíme do wrappera.

Týmto temným dňom webdesignu je dnes už ale našťastie koniec. Flexbox dokáže napozicovať a hlavne vycentrovať čokoľvek na stránke a to jedným univerzálnym spôsobom. Niet divu, že Bootstrap nad ním implementoval množstvo utility tried, vďaka ktorým môžeme elementy jednoducho pozicovať jednoduchým nastavením triedy.

Flex kontajner

Základným princípom flexboxu je, že aplikujeme vlastnosť display: flex na nejaký kontajner. Tento kontajner následne získa schopnosť pozíciovať prvky v ňom vložené. O pozíciu prvkov sa teda stará kontajner, nie prvky samotné. To je dôležitý princíp, na ktorom celá táto technológia stojí. Kontajner vytvoríme typicky z elementu <div>, ktorému priradíme triedu .d-flex. Už vieme, že písmeno "d" v názve triedy označuje, že modifikuje CSS vlastnosť display. Na vytvorenie inline kontajnera môžeme namiesto tejto triedy priradiť triedu d-inline-flex. Pri východiskovom správaní sa položky vkladajú zľava doprava a roztiahnu sa cez celú výšku kontajnera.

Flex kontajner vyzerá napríklad takto:

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

Na vytvorenie kontajnera môžeme použiť aj nasledujúce responzívne triedy:

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

Smer položiek

Ako ďalší krok nastavíme smer položiek, teda ako sa majú poskladať, pokiaľ ich je v kontajneri viac. Pokiaľ chceme napríklad len niečo vycentrovať a v kontajneri máme len jednu položku, smer udáva aký smerom sa bude centrovať. Na určenie smeru používame triedy:

• .flex-row - vodorovný smer (do riadku, zľava doprava), východisková hodnota keď triedu neuvedieme,
• .flex-row-reverse - vodorovný smer pospiatky (do riadku, sprava doľava),
• .flex-column - zvislý smer (do stĺpca, zhora nadol),
• .flex-column-reverse - zvislý smer pospiatky (do stĺpca, zdola nahor).

Opäť môžeme využiť aj responzívnu verziu tried, ktoré dané správanie aplikujú až od určitej veľkosti 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-lg-column-reverse,
• .flex-xxl-row,
• .flex-xxl-row-reverse,
• .flex-xxl-column,
• .flex-xxl-column-reverse.

Zarovnanie obsahu

Potom, čo sme triedou definovali smer hlavnej osi, môžeme nastaviť, ako sa má obsah v tomto smere zarovnávať. Keďže smer môže byť ako vodorovný tak zvislý, namiesto termínov ako "dole" alebo "doprava" sa tu používajú termíny "začiatok" a "koniec". Na nastavenie zarovnania slúžia triedy:

• .justify-content-start - zarovnanie od začiatku do konca, východisková hodnota keď triedu neuvedieme,
• .justify-content-end - zarovnanie od konca do začiatku,
• .justify-content-center - zarovnanie na stred,
• .justify-content-between - vyplnenie celého priestoru s položkami rovnomerne rozprestretými a s položkami po stranách,
• .justify-content-around - vyplnenie celého priestoru s položkami rovnomerne rozprestretými a medzerami po stranách,
• .justify-content-evenly - vyplnenie celého priestoru s položkami rovnomerne rozprestretými a s rovnakými rozostupmi medzi položkami aj na okrajoch kontajnera.

Opäť tu máme možnosť využiť všetky responzívne triedy ako je napríklad .justify-content-sm-start a tak ďalej.

Hodnoty si vyskúšajme:

<p>justify-content-start:</p>
<div class="d-flex justify-content-start">
    <div class="bg-success p-2 m-1 text-white">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 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">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 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">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 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">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 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">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 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">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>

Živá ukážka v prehliadači:

Pokiaľ nastavíme smer hlavnej osi na zvislý triedou .flex-column, docielime zarovnanie na výšku:

Zarovnanie položiek

Zarovnanie položiek nie je nič iné, než zarovnanie obsahu po druhej osi. Pokiaľ máme flexbox na riadok, nastavuje zarovnanie na výšku, inak nastavuje zarovnanie na šírku. Môžeme ho špecifikovať triedami:

• .align-items-stretch - položky sa roztiahnu cez výšku/šírku kontajnera, východisková hodnota keď triedu neuvedieme,
• .align-items-start - zarovnanie od začiatku do konca,
• .align-items-end - zarovnanie od konca do začiatku,
• .align-items-center - zarovnanie na stred,
• .align-items-baseline - rovnaké ako štart, ale zarovnáva podľa riadku textu. Ak majú položky inú veľkosť fontu, budú všetky zarovnané na jednu úroveň za začiatok kontajnera.

Máme tu opäť aj responzívne triedy, to sú:

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

Vyskúšajme 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">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 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">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 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">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 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">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 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">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>

Výsledok v prehliadači:

Zarovnanie samozrejme môžeme kombinovať, môžeme teda zarovnať na stred ako zvisle, tak vodorovne:

<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">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>

Výsledok:

Align self

Aby zarovnanie nebolo málo, máme tu ešte tretí Align-self, ako už názov napovedá, neurčuje ako sú položky zarovnané voči kontajneru, ale ako sú zarovnané voči sebe, v každom riadku alebo stĺpci kontajnera. Príslušné triedy priraďujeme priamo položkám kontajnera, nie kontajneru samotnému ako v predchádzajúcich prípadoch.

Môžeme priradiť triedy:

• .align-self-stretch - roztiahne položku po druhej osi, východisková hodnota keď triedu neuvedieme,
• .align-self-start - zarovná položku na začiatok druhej osi riadku/stĺpca,
• .align-self-end - zarovná položku na koniec druhej osi riadku/stĺpca,
• .align-self-center - zarovná položku na stred druhej osi riadku/stĺpca,
• .align-self-baseline - zarovná položku na začiatok druhej osi riadku/stĺpca, podľa základnej linky textu. Pokiaľ použijeme pri položkách jednotný font, funguje ako .align-self-start. Pokiaľ zvolíme inak veľké písmo, budú všetky položky zarovnané na jednu úroveň za začiatok druhej osi riadku/stĺpca.

Responzívne varianty tried sú:

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

Opäť si vyskúšajme hodnoty:

<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">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 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">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 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">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 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">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 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">Item 1</div>
    <div class="bg-success p-2 m-1 text-white">Item 2</div>
    <div class="bg-success p-2 m-1 text-white">Item 3</div>
</div>

Živá ukážka:

Miešanie flexboxu s margin:auto

Pokiaľ nastavíme nejakému elementu vo flex kontajneri margin-top: auto alebo margin-bottom: auto, odstavia sa všetky ďalšie prvky na koniec danej strany:

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

Výsledok:

V budúcej lekcii, Bootstrap - Flex utilities druhýkrát, dokončíme popis flex utilities.