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í, pořadí a zarovnání pomocí Flex utilities

V této lekci prozkoumáme další Flex utilities 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 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,
• .flex-xxl-nowrap,
• .flex-xxl-wrap,
• .flex-xxl-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, 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 jen 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ě zase existují kombinace s danými breakpointy, jako například .order-md-last a podobně.

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

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

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