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