Lekce 19 - Bootstrap - Flex utility podruhé

V minulé lekci, Bootstrap - Flex utility, jsme se začali věnovat popisu flex utilit.

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

Zalamování, pořadí a zarovnání pomocí flex utilit

V této lekci prozkoumáme další flex utility v Bootstrapu. Probereme možnosti zalomení obsahu, nastavení pořadí prvků a zbývající metodu zarovnání v rámci flex kontejnerů.

Zalamování

Položky ve flexboxu můžeme nechat také zalamovat. To znamená, že u řádkového kontejneru se při naplnění řádku přebytečné položky přesunou na další řádek. U sloupcového kontejneru se obdobně přesunou na další sloupec. K tomu slouží následující třídy:

• .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 tedy nad předchozím a 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,
• .flex-xxl-nowrap,
• .flex-xxl-wrap,
• .flex-xxl-wrap-reverse.

Ukažme si použití na řádkovém kontejneru, postup u sloupcového by byl 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, docílíme toho 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ůžeme velmi jednoduše prohazovat elementy jen na základě velikosti viewportu, a to pouhým přiřazením třídy k těmto elementům.

Základní třídy Bootstrap poskytuje s hodnotami 0 až 5:

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

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

Samozřejmě opět existují kombinace s danými breakpointy, jako například .order-md-last a podobně.

Více nás však v tomto případě budou nejspíše zajímat právě responzivní třídy, které změní pořadí prvku od určité velikosti 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.

<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

Máme k dispozici i čtvrté a zároveň poslední zarovnání. V tomto případě se jedná o zarovnání všech řádků nebo sloupců v kontejneru, pokud se jeho obsah zalamuje. Je-li kontejner vyšší, než kolik zaberou jeho řádky, nebo širší, než kolik zaberou jeho sloupce, vznikne v něm volné místo. To lze rozdělit různými způsoby, k čemuž máme opět připravených několik tříd:

• .align-content-start – Položky se vkládají na začátek kontejneru, zatímco mezera zůstává na jeho konci. Toto je výchozí chování i v případě, že kontejneru nepřiřadíme žádnou třídu.
• .align-content-end – Položky se vkládají na konec kontejneru, zatímco mezera zůstává na jeho začátku.
• .align-content-center – Položky se vkládají do středu kontejneru, zatímco 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 mezery byly 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,
• .align-content-xxl-start,
• .align-content-xxl-end,
• .align-content-xxl-center,
• .align-content-xxl-around,
• .align-content-xxl-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:

To je k flexboxu 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í.