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 poziciujú. Niet divu, poziciovanie 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 bolo možné 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 web dizajnu je dnes už ale našťastie koniec. Flexbox dokáže napoziciovať 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 poziciovať 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ť poziciovať prvky, ktoré sú 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ť, ak ich je v kontajneri viac. Ak chceme napríklad vycentrovať len niečo 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 zarovnať. 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 po koniec, východisková hodnota keď triedu neuvedieme,
• .justify-content-end - zarovnanie od konca po začiatok,
• .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 ďalšie.

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>

Live ukážka v prehliadači:

Ak nastavíme smer hlavnej osi na zvislý pomocou triedy .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 po koniec,
• .align-items-end - zarovnanie od konca po začiatok,
• .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, všetky budú zarovnané na jednu úroveň za začiatok kontajnera.

Opäť tu máme aj responzívne triedy, ktoré 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ť, a 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 zarovnaní nebolo málo, máme tu ešte tretie 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. Ak použijeme pri položkách jednotný font, funguje ako .align-self-start. Ak zvolíme inú veľkosť písma, 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>

Live ukážka:

Miešanie flexboxu s margin:auto

Ak 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 ďalšej lekcii, Bootstrap - Flex utilities 2, dokončíme flex utilities.