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