Lekce 19 - Bootstrap - Flex utilities podruhé

V minulé lekci, Bootstrap - Flex utilities, jsme započali popis flex utilities.

V dnešním tutoriálu CSS frameworku Bootstrap budeme pokračovat flex utilitami a toto téma dokončíme.

Zalamování

Položky ve flexboxu můžeme nechat i zalamovat. To znamená, že v případě řádkového kontejneru se při naplnění řádku zalomí zbývající položky na další řádky. V případě sloupcového obdobně na další sloupce. Třídy k tomu použijeme následující:

• .flex-nowrap - Položky se nikdy nezalomí a pokud se do kontejneru nevejdou, tak z něj vytečou. Toto je výchozí chování.
• .flex-wrap - Položky se zalamují.
• .flex-wrap-reverse - Položky se zalamují opačně, další řádek je nad předchozím, další sloupec je před předchozím.

Responzivní třídy jsou:

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

Ukažme si použití na řádkovém kontejneru, použití na sloupcovém by bylo 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ýsledek:

Pořadí

Pokud bychom v kontejneru chtěli nějaký prvek umístit na jinou pozici, než na kterou patří podle pozice v HTML kódu, můžeme toho docílit přiřazením třídy. Toto chování je velmi výhodné pro tvorbu responzivních layoutů založených na flexboxu, jelikož můžete velmi jednoduše prohazovat elementy jen na základě velikosti viewportu a to jen přiřazením třídy k těmto elementům.

Základních tříd 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

Kromě nich existují ještě:

• .order-first - Vždy první, bez ohledu na pořadí dalších elementů
• .order-last - Vždy poslední, bez ohledu na pořadí dalších elementů
• .order-unordered - Nezařazený

Více nás v tomto případě budou ale asi zajímat právě responzivní třídy, které změní pořadí prvku od určité velikosti viewportu:

• .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ýsledek v prohlížeči:

Align content

Ano, máme tu i čtvrté zarovnání, již poslední. V tomto případě se jedná o zarovnání všech řádků nebo sloupců v kontejneru v případě, že se jeho obsah zalamuje. Pokud je kontejner vyšší než kolik zaberou jeho řádky nebo širší, než kolik zaberou jeho sloupce, vznikne v něm volné místo. To můžeme rozdělit různými způsoby a samozřejmě k tomu máme opět připravených několik tříd:

• .align-content-start - Položky se vkládají na začátek kontejneru, mezera zůstává na jeho konci. Toto je výchozí chování i pokud nepřiřadíme žádnou třídu.
• .align-content-end - Položky se vkládají na konec kontejneru, mezera zůstává na jeho začátku.
• .align-content-center - Položky se vkládají do středu kontejneru, mezera se rozdělí mezi začátek a konec.
• .align-content-between - Mezera se rozdělí rovnoměrně mezi řádky/sloupce tak, aby mezery nebyly na začátku a konci kontejneru.
• .align-content-around - Mezera se rozdělí rovnoměrně mezi řádky/sloupce tak, aby byly mezery i na začátku a konci kontejneru.
• .align-content-stretch - Položky se roztáhnou tak, aby se vyplnila celá plocha kontejneru a mezera nikdy nevznikla.

Příslušné responzivní třídy jsou:

• .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ázka:

K flexboxu je to vše.

V následujícím cvičení, Řešené úlohy k 17.-19. lekci Bootstrap CSS frameworku, si procvičíme nabyté zkušenosti z předchozích lekcí.