#1 Flexbox
Flexbox je nejpoužívanějším druhem rozložení na webových stránkách; jeho hlavní myšlenkou je poskytovat jednoduché rozložení, které je předvídatelné a má jasné vlastnosti. Umožňuje vytvářet plně responzivní struktury, které se přizpůsobují okolí podle nastavení, ovlivňuje jak se prvky chovají a další.
Flexbox se rozděluje na dvě části – kontejner a položky, kde kontejner je obal položek, jemuž je přidělena vlastnost display: flex; a položky jsou prvky, na které se flexbox aplikuje a které se mu přizpůsobují.
#kontejner {
display: flex;
}
#2 Flex kontejner
Flex kontejner nebo-li obal flexboxu, je prvek, který seskupuje prvky, na které chceme flexbox aplikovat. Jeho základní vlastností je display: flex;, která aplikuje flexbox. Dále se kontejneru přidělují následující vlastnosti, které určují jeho chování:
- flex-direction – určuje směr toku prvků
- justify-content – upravuje chování prvků na hlavní ose
- align-items – upravuje chování prvků na vedlejší ose
- flex-wrap – definuje, zda se mohou prvky zalamovat na nový řádek
- flex-flow – slučuje vlastnosti flex-wrap a flex-direction
- align-content – upravuje chování prvků v řádku, jestliže jich je více, podobná align-items
- gap – nastavuje mezery mezi prvky vně flexboxu (přijímá jakoukoliv číselnou hodnotu s jednotkou)
<div id="kontejner">
<div class="polozka prvni">1. položka</div>
<div class="polozka druha">2. položka</div>
<div class="polozka treti">3. položka</div>
</div>
flex-direction
Vlastnost flex-direction usměrňuje tok prvků v kontejneru – určuje, zda se budou prvky řadit vedle sebe nebo pod sebe, a určuje hlavní a vedlejší osu (o osách níže). Vlastnost může nabývat následujících hodnot:
| Hodnota | Popis | Výsledek |
|---|---|---|
| row | základní hodnota, prvky se řadí vedle sebe | První prvek vlevo, poslední vpravo, ostatní mezi nimi |
| column | prvky se řadí pod sebe | První prvek nahoře, poslední dole, ostatní mezi nimi |
| row-reverse | prvky se řadí jako u hodnoty row, s rozdílem, že jsou v opačném pořadí | První prvek vpravo, poslední vlevo, ostatní mezi nimi |
| column-reverse | prvky se řadí jako u hodnoty column, s rozdílem, že jsou v opačném pořadí | První prvek dole, poslední nahoře, ostatní mezi nimi |
justify-content a align-items
Jmény zdánlivě nesouvisející položky, určují chování vnořených prvků v kontejneru na jeho osách. V konceptu flexbox neexistují osy X a Y, ale hlavní osa a vedlejší osa. Vlastnost justify-content vždy ovlivňuje hlavní osu, zatímco vlastnost align-items ovlivňuje osu vedlejší.
Dělení hlavní a vedlejší osy záleží na vlastnosti flex-direction – hlavní osa je vždy ve směru toku prvků. V základu (hodnoty row a row-reverse) je hlavní osa vodorovná a vedlejší vertikální, ale pokud má vlastnost flex-direction hodnoty column nebo column-reverse, osy se otáčí i se směrem toku prvků – hlavní osa je vertikální zatímco vedlejší je vodorovná.
Výpis nejčastěji používaných hodnot pro obě vlastnosti:
| Hodnota | Popis |
|---|---|
| start | Prvky se zarovnají na začátek kontejneru, nehledě na flex-direction |
| flex-start | Prvky se zarovnají na začátek osy (row a column na začátek, row-reverse a column-reverse na konec) |
| center | Prvky se zarovnají na střed osy |
| end | Prvky se zarovnají na konec kontejneru, nehledě na flex-direction |
| flex-end | Prvky se zarovnají na konec osy (row a column na konec, row-reverse a column-reverse na začátek) |
| space-around | Prvky kolem sebe vytvoří rovnoměrné odsazení (každý prvek má svoje odsazení na všech stranách, tedy pokud jsou prvky vedle sebe, odsazení se sečte) |
| space-evenly | Prvky se rovnoměrně rozprostřou po celé ose (mezery stejné mezi prvky i na krajích) |
| space-between | Prvky se rovnoměrně rozprostřou po celé ose bez odsazení od kraje |
| stretch | Prvky se rovnoměrně natáhnou, aby pokryly celou šířku |
flex-wrap
Vlastnost flex-wrap určuje, zda se mohou prvky přemístit na nový řádek, není-li na stávajícím řádku místo. Základním kamenem flexboxu je, že žádný prvek nepřeskočí na nový řádek dokud není specifikováno jinak, raději ho CSS zmenší nebo je prvek vytlačen ze kontejneru. Tuto funkci vlastnost flex-wrap přepisuje na základě její hodnoty.
Hodnotami vlastnosti flex-wrap mohou být tato klíčová slova – no-wrap, která je základní vlastností, prvky nemohou přeskakovat mezi řádky, wrap, přepisuje základní nastavení, prvky mohou být na vícero řádcích a wrap-reverse, která funguje jako wrap, avšak otáčí pořadí prvků.
#3 Flexbox položky
Položky u flexboxu označují prvky, které se nacházejí v prvku, který má vlastnost display: flex;. Samotné položky flexboxu lze také stylovat, aby se přizpůsobovali vně kontejneru. Položky mohou mít následující vlastnosti:
- align-self – přepisuje hodnotu kontejneru align-items pro daný prvek
- flex-grow – určuje, kolikrát bude prvek větší než ostatní prvky
- flex-shrink – určuje, o kolik více se může prvek zmešit než ostatní
- flex-basis – určuje počáteční velikost prvku
- flex – slučuje vlastnosti flex-grow, flex-shrink a flex-basis (ve stejném pořadí)
- order – vlastní nastavení pořadí, ve kterém se budou prvky nacházet
flex-grow, flex-shrink a flex-basis
Tři vlastnosti, které se dají zapsat do společné vlastnosti flex určují, jak se bude daný prvek chovat na rozdíl od prvků ostatních.
Vlastnost flex-grow a flex-shrink jsou si sobě opačné vlastnosti, které přijímají číselné hodnoty. Vlastnost flex-grow určuje kolikrát bude prvek větší než ostatní – hodnota 3 bude znamenat, že bude prvek 3x větší, hodnota 5 je 5násobné zvětšení apod. Vlastnost flex-shrink určuje kolikrát se bude prvek zmenšovat oproti ostatním – hodnota 0 prvku zabrání se zmenšovat, hodnota 2 znamená, že se prvek bude zmenšovat dvakrát rychleji.
Vlastnost flex-basis doplňuje tyto vlastnosti; určuje počáteční velikost prvku na hlavní ose – je-li například definováno kontejneru flex-direction: row;, prvku se nastaví šířka, je-li flex-direction: column, prvku se nastaví výška. Přijímá číselnou hodnotu s absolutní nebo dynamickou jednotkou.
.polozka.prvni {
flex: 1 0 300px;
/* grow – 1, shrink – 0, basis – 300px */
}
.polozka.druha {
flex-shrink: 2;
}
V tomto příkladu se nebude první položka zmenšovat, růst bude stejně jako ostatní a bude začínat s 300px rozměrem (flex-basis). Druhá položka se bude zvětšovat jako ostatní, ale zmenšovat se bude dvakrát rychleji.
order
Vlastnost order určuje změnu v pořadí. Přijímá jakoukoliv čistou číselnou hodnotu, která určí jeho pořadí v kontejneru nebo speciální hodnotu -n, kde n je opět číselná hodnota, ale minus zaručí, že se bude pořadí počítat zezadu (hodnota -1 prvek umístí vždy poslední, -2 předposlední…)
.polozka.prvni {
order: 2;
}
V tomto příkladu je definována vlastnost order: 2; první položce v kontejneru – to ji přesune na místo druhé, zatímco druhá položka bude posunuta na místo první.