Lekce 24 - Bootstrap - Flex utilities podruhé

HTML a CSS Bootstrap Bootstrap - Flex utilities podruhé American English version English version

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Bootstrap - Flex utilities, jsme započali popis flex utilities. V dnešním tutoriálu CSS frameworku Bootstrap v něm budeme pokračovat 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. Uvidíme se zas v příští lekci, Bootsrap - Multimediální objekty a kontejnery, kdy si uvedeme mediální objekty a kontejnery.


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
3 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Bootstrap - Flex utilities
Miniatura
Všechny články v sekci
Bootstrap
Aktivity (3)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!