19. diel - Bootstrap - Flex utilities 2

V minulej lekcii, Bootstrap - Flex utilities, sme začali s popisom flex utilities.

V dnešnom tutoriáli CSS frameworku Bootstrap budeme pokračovať flex utilitami a túto tému dokončíme.

Zalamovanie, poradie a zarovnanie pomocou flex utilities

V tejto lekcii preskúmame ďalšie flex utilities v Bootstrape. Preberieme možnosti zalomenia obsahu, nastavenia poradia prvkov a zostávajúcu metódu zarovnania v rámci flex kontajnerov.

Zalamovanie

Položky vo flexboxe môžeme aj zalamovať. To znamená, že v prípade riadkového kontajnera sa pri naplnení riadku zalomia zvyšné položky do ďalších riadkov. V prípade stĺpcového rovnako na ďalšie stĺpce. Použijeme na to nasledujúce triedy:

• .flex-nowrap - Položky sa nikdy nezalomia a pokiaľ sa do kontajnera nezmestia, tak z neho vytečú. Toto je predvolené správanie.
• .flex-wrap - Položky sa zalomia.
• .flex-wrap-reverse - Položky sa zalomia 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,
• .flex-xxl-nowrap,
• .flex-xxl-wrap,
• .flex-xxl-wrap-reverse.

Ukážme si to na riadkovom kontajneri, na stĺpcovom by to bolo podobné:

<p>Default value, nowrap:</p>
<div class="d-flex bg-warning">
    <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 class="bg-success p-2 m-1 text-white">Item 4</div>
    <div class="bg-success p-2 m-1 text-white">Item 5</div>
    <div class="bg-success p-2 m-1 text-white">Item 6</div>
    <div class="bg-success p-2 m-1 text-white">Item 7</div>
    <div class="bg-success p-2 m-1 text-white">Item 8</div>
    <div class="bg-success p-2 m-1 text-white">Item 9</div>
    <div class="bg-success p-2 m-1 text-white">Item 10</div>
    <div class="bg-success p-2 m-1 text-white">Item 11</div>
    <div class="bg-success p-2 m-1 text-white">Item 12</div>
</div>

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

<br />
<p>Wrap-reverse:</p>
<div class="d-flex bg-warning flex-wrap-reverse">
    <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 class="bg-success p-2 m-1 text-white">Item 4</div>
    <div class="bg-success p-2 m-1 text-white">Item 5</div>
    <div class="bg-success p-2 m-1 text-white">Item 6</div>
    <div class="bg-success p-2 m-1 text-white">Item 7</div>
    <div class="bg-success p-2 m-1 text-white">Item 8</div>
    <div class="bg-success p-2 m-1 text-white">Item 9</div>
    <div class="bg-success p-2 m-1 text-white">Item 10</div>
    <div class="bg-success p-2 m-1 text-white">Item 11</div>
    <div class="bg-success p-2 m-1 text-white">Item 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, docielime to priradením triedy. Toto správanie je veľmi výhodné pre tvorbu responzívnych layoutov založených na flexboxe, pretože môžeme veľmi jednoducho prehadzovať elementy len na základe veľkosti viewportu, a to iba priradením triedy k týmto elementom.

Bootstrap poskytuje základné triedy s hodnotami 0 až 5:

• .order-0,
• .order-1,
• .order-2,
• .order-3,
• .order-4,
• .order-5.

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.

Samozrejme zase existujú kombinácie s danými breakpointmi, ako napríklad .order-md-last a podobne.

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 viewportu:

• .order-sm-0,
• .order-sm-1,
• .order-sm-2,
• .order-sm-3,
• .order-sm-4,
• .order-sm-5,
• .order-md-0,
• .order-md-1,
• .order-md-2,
• .order-md-3,
• .order-md-4,
• .order-md-5,
• .order-lg-0,
• .order-lg-1,
• .order-lg-2,
• .order-lg-3,
• .order-lg-4,
• .order-lg-5,
• .order-xl-0,
• .order-xl-1,
• .order-xl-2,
• .order-xl-3,
• .order-xl-4,
• .order-xl-5,
• .order-xxl-0,
• .order-xxl-1,
• .order-xxl-2,
• .order-xxl-3,
• .order-xxl-4,
• .order-xxl-5.

Ukážka:

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

Výsledok v prehliadači:

Align content

Áno, máme tu aj štvrté zarovnanie, a už aj 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. Pokiaľ je kontajner vyšší než koľko zaberú jeho riadky alebo širší, 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 východiskové správanie aj pokiaľ nepriradíme ž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 riadky/stĺpce tak, aby medzery neboli na začiatku a konci kontajnera,
• .align-content-around - medzera sa rozdelí rovnomerne medzi riadky/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,
• .align-content-xxl-start,
• .align-content-xxl-end,
• .align-content-xxl-center,
• .align-content-xxl-around,
• .align-content-xxl-stretch.

Použitie:

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

Ukážka:

V rámci flexboxu je to všetko.

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