18. diel - Bootstrap - Flex utilities

V minulej lekcii, Bootstrap - Utilities , sme si predstavili všetky utility CSS frameworku Bootstrap okrem tých pre flexboch. Práve flexboxu sa budeme v dnešnom a nasledujúcom tutoriálu intenzívne venovať.

Flex

Príchod Flex boxu do CSS 3 štandardu znamenal zásadnú zmenu toho, ako sa elementy pozicují. Niet divu, pozicovanie totiž dovtedy 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 trikov ako nastavovanie elementov tak, aby sa vykresľovali ako tabuľky, pretože len tak je iš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 wrapper.

Týmto temným dňom webdesignu je dnes už našťastie koniec. Flexbox dokáže napozicovat a hlavne vycentrovať čokoľvek na stránke a to jedným univerzálnym spôsobom. Niet divu, že Bootstrap nad ním implementoval veľa utility tried, vďaka ktorým môžeme elementy jednoducho pozicový jednoduchým nastavením triedy, bez ďalšieho zbytočného rozumovanie

Flex kontajner

Základným princípom flexboxu je, že aplikujeme vlastnosť display: flex nie nejaký kontajner. Tento kontajner následne získa schopnosť pozicový prvky v ňom vložené. O pozíciu prvkov sa teda stará kontajner, nie prvky samotnej. 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. Pre vytvorenie inline kontajnera môžeme namiesto tejto triedy priradiť triedu d-inline-flex. Pri predvolenom správanie sa položky vkladajú zľava doprava a roztiahnu sa cez celú výšku kontajnera.

Flex kontajner by mohol vyzerať napr. Nasledovne:

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

Pre vytvorenie kontajnera môžeme použiť aj responzívne triedy, tie sú nasledovné:

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

Smer položiek

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

• .flex-row - Horizontálny smer (do riadku, zľava doprava), predvolená hodnota keď triedu neuvedieme
• .flex-row-reverse - Horizontálny 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ívne verzie tried, ktoré dané správanie aplikujú až od určitej veľkosti viewporte:

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

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". K nastaveniu zarovnanie slúžia triedy:

• .justify-content-start - zarovnanie od začiatku do konca, predvolená 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 rozprestrenými as položkami po stranách
• .justify-content-around - vyplnenie celého priestoru s položkami rovnomerne rozprestrenými a medzerami po stranách

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">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ážka v prehliadači:

Ak 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. Ak máme flexbox na riadok, nastavuje zarovnanie na výšku, inak nastavuje zarovnanie na šírku. Môžeme ho špecifikovať triedami:

• .align-items-start-stretch - položky sa roztiahnu cez výšku / šírku kontajnera, predvolená hodnota keď triedu neuvedieme
• .align-items-start-start - zarovnanie od začiatku do konca
• .align-items-start-end - zarovnanie od konca do začiatku
• .align-items-start-center - zarovnanie na stred
• .align-items-start-baseline - Rovnaké ako štart, ale zarovnáva podľa riadky 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

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">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ý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">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ý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 kontajnera samotnému ako v predchádzajúcich prípadoch.

Môžeme priradiť triedy:

• .align-self-stretch - Roztiahne položku po druhej osi, predvolená hodnota keď triedu neuvedieme.
• .align-self-start - Zarovná položku na začiatok druhej osi riadka / stĺpca.
• .align-self-end - Zarovná položku na koniec druhej osi riadka / stĺpca.
• .align-self-center - Zarovná položku na stred druhej osi riadka / stĺpca.
• .align-self-baseline - zarovná položku na začiatok druhej osi riadka / 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 inak veľké písmo, budú všetky položky zarovnané na jednu úroveň za začiatok druhej osi riadka / 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

<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ážka:

Miešanie flexboxu s margin: auto

Ak nastavíme nejakému elementu vo flex kontajneri margin-{nějaká-strana}: auto, odstaví sa všetky ďalšie prvky na koniec danej strany. Ak teda napr. Priradíme elementu triedu .mr-auto (nastavujúce pravý margin na hodnotu auto) a kontajner bude riadkový a so zarovnaním na začiatok, zobrazia sa všetky nasledujúce elementy prilepené na pravom okraji. Podobného správanie môžeme docieliť aj v stĺpcovom kontajneri nastavením hodnoty auto hornému alebo dolnému margine, čo má za následok odsunutie nasledujúcich položiek na túto 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ýsledok:

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