Lekce 18 - Bootstrap - Flex utilities
V minulé lekci, Bootstrap - Utilities, jsme si představili všechny utility CSS frameworku Bootstrap kromě těch pro flexbox.
V dnešním a následujícím tutoriálu se budeme intenzivně věnovat flexboxu.
Flex
Příchod Flexboxu 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:
Pokud nastavíme směr hlavní osy na svislý třídou
.flex-column
, docílíme zarovnání na výšku:
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-stretch
- položky se roztáhnou přes výšku/šířku kontejneru, výchozí hodnota když třídu neuvedeme.align-items-start
- zarovnání od začátku do konce.align-items-end
- zarovnání od konce do začátku.align-items-center
- zarovnání na střed.align-items-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:
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:
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:
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:
V příští lekci, Bootstrap - Flex utilities podruhé, dokončíme popis flex utilities.