19. diel - Bootstrap - Flex utilities druhýkrát

V minulej lekcii, Bootstrap - Flex utilities , sme začali popis flex utilities. V dnešnom tutoriále CSS frameworku Bootstrap v ňom budeme pokračovať a túto tému dokončíme.

Zalamovanie

Položky vo flexboxu môžeme nechať aj zalamovať. To znamená, že v prípade riadkového kontajnera sa pri naplnení riadku zalomia zostávajúce položky na ďalšie riadky. V prípade stĺpcového obdobne na ďalšie stĺpce. Triedy k tomu použijeme nasledujúce:

• .flex-nowrap - Položky sa nikdy nezalomí a ak sa do kontajnera nezmestia, tak z neho vytečú. Toto je predvolené správanie.
• .flex-wrap - Položky sa zalamujú.
• .flex-wrap-reverse - Položky sa zalamujú opačne, ďalší riadok je nad predchádzajúcim, ďalší stĺpec je pred predchádzajúcim.

Responzívne triedy sú:

• .flex-sm-nowrap
• .flex-sm-wrap
• .flex-sm-wrap-reverse
• .flex-md-nowrap
• .flex-md-wrap
• .flex-md-wrap-reverse
• .flex-lg-nowrap
• .flex-lg-wrap
• .flex-lg-wrap-reverse
• .flex-xl-nowrap
• .flex-xl-wrap
• .flex-xl-wrap-reverse

Ukážme si použitie na riadkovom kontajnera, použitie na stĺpcovom by bolo obdobné:

<div class="d-flex bg-warning">
    <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 class="bg-success p-2 m-1 text-white">Položka 4</div>
    <div class="bg-success p-2 m-1 text-white">Položka 5</div>
    <div class="bg-success p-2 m-1 text-white">Položka 6</div>
    <div class="bg-success p-2 m-1 text-white">Položka 7</div>
    <div class="bg-success p-2 m-1 text-white">Položka 8</div>
    <div class="bg-success p-2 m-1 text-white">Položka 9</div>
    <div class="bg-success p-2 m-1 text-white">Položka 10</div>
    <div class="bg-success p-2 m-1 text-white">Položka 11</div>
    <div class="bg-success p-2 m-1 text-white">Položka 12</div>
</div>

<br />
<div class="d-flex bg-warning flex-wrap">
    <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 class="bg-success p-2 m-1 text-white">Položka 4</div>
    <div class="bg-success p-2 m-1 text-white">Položka 5</div>
    <div class="bg-success p-2 m-1 text-white">Položka 6</div>
    <div class="bg-success p-2 m-1 text-white">Položka 7</div>
    <div class="bg-success p-2 m-1 text-white">Položka 8</div>
    <div class="bg-success p-2 m-1 text-white">Položka 9</div>
    <div class="bg-success p-2 m-1 text-white">Položka 10</div>
    <div class="bg-success p-2 m-1 text-white">Položka 11</div>
    <div class="bg-success p-2 m-1 text-white">Položka 12</div>
</div>

<br />
<div class="d-flex bg-warning flex-wrap-reverse">
    <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 class="bg-success p-2 m-1 text-white">Položka 4</div>
    <div class="bg-success p-2 m-1 text-white">Položka 5</div>
    <div class="bg-success p-2 m-1 text-white">Položka 6</div>
    <div class="bg-success p-2 m-1 text-white">Položka 7</div>
    <div class="bg-success p-2 m-1 text-white">Položka 8</div>
    <div class="bg-success p-2 m-1 text-white">Položka 9</div>
    <div class="bg-success p-2 m-1 text-white">Položka 10</div>
    <div class="bg-success p-2 m-1 text-white">Položka 11</div>
    <div class="bg-success p-2 m-1 text-white">Položka 12</div>
</div>

výsledok:

Poradie

Ak by sme v kontajneri chceli nejaký prvok umiestniť na inú pozíciu, než na ktorú patrí podľa pozície v HTML kóde, môžeme to docieliť priradením triedy. Toto správanie je veľmi výhodné pre tvorbu responzívne layoutov založených na flexboxu, pretože môžete veľmi jednoducho prehadzovať elementy len na základe veľkosti viewporte a to len priradením triedy k týmto elementom.

Základných tried Bootstrap poskytuje 12:

• .order-1
• .order-2
• .order-3
• .order-4
• .order-5
• .order-6
• .order-7
• .order-8
• .order-9
• .order-10
• .order-11
• .order-12

Okrem nich existujú ešte:

• .order-first - Vždy prvý, bez ohľadu na poradie ďalších elementov
• .order-last - Vždy posledné, bez ohľadu na poradie ďalších elementov
• .order-unordered - Nezaradený

Viac nás v tomto prípade budú ale asi zaujímať práve responzívne triedy, ktoré zmenia poradie prvku od určitej veľkosti viewporte:

• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-sm-6
• .order-sm-7
• .order-sm-8
• .order-sm-9
• .order-sm-10
• .order-sm-11
• .order-sm-12
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-md-6
• .order-md-7
• .order-md-8
• .order-md-9
• .order-md-10
• .order-md-11
• .order-md-12
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-lg-6
• .order-lg-7
• .order-lg-8
• .order-lg-9
• .order-lg-10
• .order-lg-11
• .order-lg-12
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xl-6
• .order-xl-7
• .order-xl-8
• .order-xl-9
• .order-xl-10
• .order-xl-11
• .order-xl-12

<div class="d-flex align-content-start">
    <div class="bg-success p-2 m-1 text-white order-3">Položka 1</div>
    <div class="bg-success p-2 m-1 text-white order-1">Položka 2</div>
    <div class="bg-success p-2 m-1 text-white order-2">Položka 3</div>
</div>

Výsledok v prehliadači:

Align content

Áno, máme tu aj štvrté zarovnanie, už posledný. V tomto prípade sa jedná o zarovnanie všetkých riadkov alebo stĺpcov v kontajneri v prípade, že sa jeho obsah zalamuje. Ak je kontajner vyššia než koľko zaberú jeho riadky alebo širšie, než koľko zaberú jeho stĺpce, vznikne v ňom voľné miesto. To môžeme rozdeliť rôznymi spôsobmi a samozrejme k tomu máme opäť pripravených niekoľko tried:

• .align-content-start - Položky sa vkladajú na začiatok kontajnera, medzera zostáva na jeho konci. Toto je predvolené správanie aj pokiaľ nepriradíte žiadnu triedu.
• .align-content-end - Položky sa vkladajú na koniec kontajnera, medzera zostáva na jeho začiatku.
• .align-content-center - Položky sa vkladajú do stredu kontajnera, medzera sa rozdelí medzi začiatok a koniec.
• .align-content-between - Medzera sa rozdelí rovnomerne medzi riadkami / stĺpce tak, aby medzery neboli na začiatku a konci kontajnera.
• .align-content-around - Medzera sa rozdelí rovnomerne medzi riadkami / stĺpce tak, aby boli medzery aj na začiatku a konci kontajnera.
• .align-content-stretch - Položky sa roztiahnu tak, aby sa vyplnila celá plocha kontajnera a medzera nikdy nevznikla.

Príslušné responzívne triedy sú:

• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-around
• .align-content-xl-stretch

<p>align-content-start:</p>
<div class="d-flex bg-warning align-content-start flex-wrap" style="height: 150px">
    <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 class="bg-success p-2 m-1 text-white">Položka 4</div>
    <div class="bg-success p-2 m-1 text-white">Položka 5</div>
    <div class="bg-success p-2 m-1 text-white">Položka 6</div>
    <div class="bg-success p-2 m-1 text-white">Položka 7</div>
    <div class="bg-success p-2 m-1 text-white">Položka 8</div>
    <div class="bg-success p-2 m-1 text-white">Položka 9</div>
    <div class="bg-success p-2 m-1 text-white">Položka 10</div>
    <div class="bg-success p-2 m-1 text-white">Položka 11</div>
    <div class="bg-success p-2 m-1 text-white">Položka 12</div>
</div>

<p>align-content-end:</p>
<div class="d-flex bg-warning align-content-end flex-wrap" style="height: 150px">
    <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 class="bg-success p-2 m-1 text-white">Položka 4</div>
    <div class="bg-success p-2 m-1 text-white">Položka 5</div>
    <div class="bg-success p-2 m-1 text-white">Položka 6</div>
    <div class="bg-success p-2 m-1 text-white">Položka 7</div>
    <div class="bg-success p-2 m-1 text-white">Položka 8</div>
    <div class="bg-success p-2 m-1 text-white">Položka 9</div>
    <div class="bg-success p-2 m-1 text-white">Položka 10</div>
    <div class="bg-success p-2 m-1 text-white">Položka 11</div>
    <div class="bg-success p-2 m-1 text-white">Položka 12</div>
</div>

<p>align-content-center:</p>
<div class="d-flex bg-warning align-content-center flex-wrap" style="height: 150px">
    <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 class="bg-success p-2 m-1 text-white">Položka 4</div>
    <div class="bg-success p-2 m-1 text-white">Položka 5</div>
    <div class="bg-success p-2 m-1 text-white">Položka 6</div>
    <div class="bg-success p-2 m-1 text-white">Položka 7</div>
    <div class="bg-success p-2 m-1 text-white">Položka 8</div>
    <div class="bg-success p-2 m-1 text-white">Položka 9</div>
    <div class="bg-success p-2 m-1 text-white">Položka 10</div>
    <div class="bg-success p-2 m-1 text-white">Položka 11</div>
    <div class="bg-success p-2 m-1 text-white">Položka 12</div>
</div>

<p>align-content-between:</p>
<div class="d-flex bg-warning align-content-between flex-wrap" style="height: 150px">
    <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 class="bg-success p-2 m-1 text-white">Položka 4</div>
    <div class="bg-success p-2 m-1 text-white">Položka 5</div>
    <div class="bg-success p-2 m-1 text-white">Položka 6</div>
    <div class="bg-success p-2 m-1 text-white">Položka 7</div>
    <div class="bg-success p-2 m-1 text-white">Položka 8</div>
    <div class="bg-success p-2 m-1 text-white">Položka 9</div>
    <div class="bg-success p-2 m-1 text-white">Položka 10</div>
    <div class="bg-success p-2 m-1 text-white">Položka 11</div>
    <div class="bg-success p-2 m-1 text-white">Položka 12</div>
</div>

<p>align-content-around:</p>
<div class="d-flex bg-warning align-content-around flex-wrap" style="height: 150px">
    <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 class="bg-success p-2 m-1 text-white">Položka 4</div>
    <div class="bg-success p-2 m-1 text-white">Položka 5</div>
    <div class="bg-success p-2 m-1 text-white">Položka 6</div>
    <div class="bg-success p-2 m-1 text-white">Položka 7</div>
    <div class="bg-success p-2 m-1 text-white">Položka 8</div>
    <div class="bg-success p-2 m-1 text-white">Položka 9</div>
    <div class="bg-success p-2 m-1 text-white">Položka 10</div>
    <div class="bg-success p-2 m-1 text-white">Položka 11</div>
    <div class="bg-success p-2 m-1 text-white">Položka 12</div>
</div>

<p>align-content-stretch:</p>
<div class="d-flex bg-warning align-content-stretch flex-wrap" style="height: 150px">
    <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 class="bg-success p-2 m-1 text-white">Položka 4</div>
    <div class="bg-success p-2 m-1 text-white">Položka 5</div>
    <div class="bg-success p-2 m-1 text-white">Položka 6</div>
    <div class="bg-success p-2 m-1 text-white">Položka 7</div>
    <div class="bg-success p-2 m-1 text-white">Položka 8</div>
    <div class="bg-success p-2 m-1 text-white">Položka 9</div>
    <div class="bg-success p-2 m-1 text-white">Položka 10</div>
    <div class="bg-success p-2 m-1 text-white">Položka 11</div>
    <div class="bg-success p-2 m-1 text-white">Položka 12</div>
</div>

Živá ukážka:

K flexboxu je to všetko. V budúcej lekcii, Riešené úlohy k 17.-19. lekciu Bootstrap CSS frameworku , sa budeme venovať univerzálne navigáciu.

V nasledujúcom cvičení, Riešené úlohy k 17.-19. lekciu Bootstrap CSS frameworku, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.