23. díl - Bootstrap - Flex utilities

HTML a CSS Bootstrap Bootstrap - Flex utilities

Unicorn College ONEbit hosting 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 - Utilities, jsme si představili všechny utility CSS frameworku Bootstrap kromě těch pro flexboch. Právě flexboxu se budeme v dnešním a následujícím tutoriálu intenzivně věnovat.

Flex

Příchod Flex boxu do CSS 3 standardu znamenal zásadní změnu toho, jak se elementy pozicují. Není divu, pozicování totiž do té doby nebylo v CSS vůbec vyřešené a veškeré dosavadní způsoby jak na stránce něco poskládat byly pouze hacky. Využívalo se triků jako nastavování elementů tak, aby se vykreslovaly jako tabulky, protože jen tak je šlo vycentrovat na výšku, řešilo se jaký typ elementu chceme vycentrovat na šířku a teprve podle toho jsme zvolili zda mu nastavíme automatický margin nebo jej obalíme do wrapperu.

Těmto temným dnům webdesignu je dnes již ale naštěstí konec. Flexbox dokáže napozicovat a hlavně vycentrovat cokoli na stránce a to jedním univerzálním způsobem. Není divu, že Bootstrap nad ním implementoval spoustu utility tříd, díky kterým můžeme elementy jednoduše pozicovat pouhým nastavením třídy, bez dalšího zbytečného rozumování :)

Flex kontejner

Základním principem flexboxu je, že aplikujeme vlastnost display: flex ne nějaký kontejner. Tento kontejner následně získá schopnost pozicovat prvky v něm vložené. O pozici prvků se tedy stará kontejner, ne prvky samotné. To je důležitý princip, na kterém celá tato technologie stojí. Kontejner vytvoříme typicky z elementu <div>, kterému přiřadíme třídu .d-flex. Již víme, že písmeno "d" v názvu třídy označuje, že modifikuje CSS vlastnost display. Pro vytvoření inline kontejneru můžeme místo této třídy přiřadit třídu d-inline-flex. Při výchozím chování se položky vkládají zleva doprava a roztáhnou se přes celou výšku kontejneru.

Flex kontejner by mohl vypadat např. takto:

<div class="d-flex"></div>

Pro vytvoření kontejneru můžeme použít i responzivní třídy, ty jsou následující:

  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex

Směr položek

Jako další krok nastavíme směr položek, tedy jak se mají poskládat, pokud jich je v kontejneru více. Pokud chcete např. jen něco vycentrovat a v kontejneru máte jen jednu položku, směr udává jaký směrem se bude centrovat. Pro určení směru používáme třídy:

  • .flex-row - Vodorovný směr (do řádku, zleva doprava), výchozí hodnota když třídu neuvedeme
  • .flex-row-reverse - Vodorovný směr pozpátku (do řádku, zprava doleva)
  • .flex-column - Svislý směr (do sloupce, shora dolů)
  • .flex-column-reverse - Svislý směr pozpátku (do sloupce, zdola nahoru)

Opět můžeme využít i responzivní verze tříd, které dané chování aplikují až od určité velikosti viewportu:

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse

Zarovnání obsahu

Poté, co jsme třídou definovali směr hlavní osy, můžeme nastavit jak se má obsah v tomto směru zarovnávat. Jelikož směr může být jak vodorovný tak svislý, místo termínů jako "dolů" nebo "doprava" se zde používají termíny "začátek" a "konec". K nastavení zarovnání slouží třídy:

  • .justify-content-start - zarovnání od začátku do konce, výchozí hodnota když třídu neuvedeme
  • .justify-content-end - zarovnání od konce do začátku
  • .justify-content-center - zarovnání na střed
  • .justify-content-between - vyplnění celého prostoru s položkami rovnoměrně rozprostřenými a s položkami po stranách
  • .justify-content-around - vyplnění celého prostoru s položkami rovnoměrně rozprostřenými a mezerami po stranách

Hodnoty si vyzkoušejme:

<p>justify-content-start:</p>
<div class="d-flex justify-content-start">
        <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>
<p>justify-content-end:</p>
<div class="d-flex justify-content-end">
        <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>
<p>justify-content-center:</p>
<div class="d-flex justify-content-center">
        <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>
<p>justify-content-between:</p>
<div class="d-flex justify-content-between">
        <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>
<p>justify-content-around:</p>
<div class="d-flex justify-content-around">
        <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>

Živá ukázka v prohlížeči:

Flex utility v Bootstrap
flex.html

Pokud nastavíme směr hlavní osy na svislý třídou .flex-column, docílíme zarovnání na výšku:

Flex utility v Bootstrap
flex_druha_osa.html

Zarovnání položek

Zarovnání položek není nic jiného, než zarovnání obsahu po druhé ose. Pokud máme flexbox na řádek, nastavuje zarovnání na výšku, jinak nastavuje zarovnání na šířku. Můžeme jej specifikovat třídami:

  • .align-items-start-stretch - položky se roztáhnou přes výšku/šířku kontejneru, výchozí hodnota když třídu neuvedeme
  • .align-items-start-start - zarovnání od začátku do konce
  • .align-items-start-end - zarovnání od konce do začátku
  • .align-items-start-center - zarovnání na střed
  • .align-items-start-baseline - Stejné jako start, ale zarovnává podle řádky textu. Pokud mají položky jinou velikost fontu, budou všechny zarovnány na jednu úroveň za začátek kontejneru.

Máme zde opět i responzivní třídy, to jsou:

  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch

Vyzkoušejme si hodnoty:

<p>align-items-stretch:</p>
<div class="d-flex align-items-stretch bg-warning" style="height: 85px;">
        <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>
<p>align-items-start:</p>
<div class="d-flex align-items-start bg-warning" style="height: 85px;">
        <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>
<p>align-items-end:</p>
<div class="d-flex align-items-end bg-warning" style="height: 85px;">
        <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>
<p>align-items-center:</p>
<div class="d-flex align-items-center bg-warning" style="height: 85px;">
        <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>
<p>align-items-baseline:</p>
<div class="d-flex align-items-baseline bg-warning" style="height: 85px;">
        <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>

Výsledek v prohlížeči:

Flex utility v Bootstrap
flex_align_item­s.html

Zarovnání samozřejmě můžeme kombinovat, můžeme tedy zarovnat na střed jak svisle, tak vodorovně:

<div class="d-flex align-items-center justify-content-center bg-warning" style="height: 85px;">
        <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>

Výsledek:

Flex utility v Bootstrap
flex_obe_osy.html

Align self

Aby zarovnání nebylo málo, máme zde ještě třetí :) Align-self, jak již název napovídá, neurčuje jak jsou položky zarovnané vůči kontejneru, ale jak jsou zarovnané vůči sobě, v každém řádku nebo sloupci kontejneru. Příslušné třídy přiřazujeme přímo položkám kontejneru, nikoli kontejneru samotnému jako v předchozích případech.

Můžeme přiřadit třídy:

  • .align-self-stretch - Roztáhne položku po druhé ose, výchozí hodnota když třídu neuvedeme.
  • .align-self-start - Zarovná položku na začátek druhé osy řádku/sloupce.
  • .align-self-end - Zarovná položku na konec druhé osy řádku/sloupce.
  • .align-self-center - Zarovná položku na střed druhé osy řádku/sloupce.
  • .align-self-baseline - Zarovná položku na začátek druhé osy řádku/sloupce, podle základní linky textu. Pokud použijeme u položek jednotný font, funguje jako .align-self-start. Pokud zvolíme jinak velké písmo, budou všechny položky zarovnány na jednu úroveň za začátek druhé osy řádku/sloupce.

Responzivní varianty tříd jsou:

  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch
<p>align-self-stretch:</p>
<div class="d-flex bg-warning" style="height: 85px;">
        <div class="bg-success p-2 m-1 text-white align-self-stretch">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>
<p>align-self-start:</p>
<div class="d-flex bg-warning" style="height: 85px;">
        <div class="bg-success p-2 m-1 text-white align-self-start">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>
<p>align-self-end:</p>
<div class="d-flex bg-warning" style="height: 85px;">
        <div class="bg-success p-2 m-1 text-white align-self-end">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>
<p>align-self-center:</p>
<div class="d-flex bg-warning" style="height: 85px;">
        <div class="bg-success p-2 m-1 text-white align-self-center">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>
<p>align-self-baseline:</p>
<div class="d-flex bg-warning" style="height: 85px;">
        <div class="bg-success p-2 m-1 text-white align-self-baseline">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>

Živá ukázka:

Flex utility v Bootstrap
align_self.html

Míchání flexboxu s margin:auto

Pokud nastavíme nějakému elementu ve flex kontejneru margin-{nějaká-strana}: auto, odstaví se všechny další prvky na konec dané strany. Pokud tedy např. přiřadíme elementu třídu .mr-auto (nastavující pravý margin na hodnotu auto) a kontejner bude řádkový a se zarovnáním na začátek, zobrazí se všechny následující elementy přilepené na pravém okraji. Podobného chování můžeme docílit i ve sloupcovém kontejneru nastavením hodnoty auto hornímu nebo dolnímu marginu, což má za následek odsunutí následujících položek na tuto stranu.

<div class="d-flex bg-warning">
        <div class="bg-success p-2 m-1 text-white">Položka 1</div>
        <div class="mr-auto 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>
<br />
<div class="d-flex flex-column bg-warning" style="height: 250px;">
        <div class="bg-success p-2 m-1 text-white">Položka 1</div>
        <div class="mt-auto 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>

Výsledek:

Flex utility v Bootstrap
flex_margin_au­to.html

V příští lekci, Bootstrap - Flex utilities podruhé, popis flex utilities dokončíme.


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
1 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 se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Bootstrap - Utilities
Miniatura
Všechny články v sekci
Bootstrap
Miniatura
Následující článek
Bootstrap - Flex utilities podruhé
Aktivity (2)

 

 

Komentáře

Avatar
T-fon
Člen
Avatar
T-fon:22.12.2017 9:11

Ahoj, nějak nerozumím té druhé ukázce v "Míchání flexboxu s margin:auto". Ta první je jasná: ve druhé položce mám uvedeno mr-auto, takže všechny další (v ukázce ta třetí) se odsunou doprava. Ve druhé ukázce je u druhé položky mt-auto, tzn. teoreticky by se třetí položka měla odsunout nahoru. Což je asi nesmysl. Ale odsunutí druhé a třetí položky (jak je zobrazený ve výsledku ukázky) bych docílil spíš uvedením mb-auto u první položky, ne?

 
Odpovědět 22.12.2017 9:11
Avatar
David Koníček:10. ledna 6:38

Jen pro edit v živé ukázce máš justify-self-end místo align-self-end ;-)

Odpovědět 10. ledna 6:38
Věř, běž a dokážeš!
Avatar
Odpovídá na T-fon
David Koníček:10. ledna 6:53

Podle mě to funguje oboustranně, když to zkouším ;) tedy když dáš v tomto případě položce mt-auto posouvá se už i daná položka a pokud dáš mb-auto, posouvají se až položky, které jsou za ní.

Odpovědět 10. ledna 6:53
Věř, běž a dokáž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.

Zobrazeno 3 zpráv z 3.