Chceš se vypracovat až k výdělku 160.000 Kč/měsíc? Důležité je začít. Staň se programátorem díky rekvalifikačnímu kurzu! Začni dnes!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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:

Flex utility v Bootstrap
flex_align_item­s.html

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:

Flex utility v Bootstrap
flex_align_item­s.html

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:

Flex utility v Bootstrap
flex_align_item­s.html

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


 

Předchozí článek
Bootstrap - Flex utilities
Všechny články v sekci
Kompletní kurz CSS frameworku Bootstrap
Přeskočit článek
(nedoporučujeme)
Řešené úlohy k 17.-19. lekci Bootstrap CSS frameworku
Článek pro vás napsal David Čápka Hartinger
Avatar
Uživatelské hodnocení:
383 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity