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;}

Tip: Jestliže potřebujete flexbox, který má být inline, lze použít hodnotu inline-flex.

Vlastnosti flexbox kontejneru

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)

Poznámka: Všechny následující příklady budeme vztahovat k tomuto HTML kódu:

#kontejner { display: flex;}

<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

Určí směr toku rozvržení. Výchozí stav je zleva doprava, do řádku.
Např. flex-direction:column – položky se skládají shora dolů, do sloupce.

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

align-items

place-items

Zkratka pro zarovnání položek v obou směrech.
Např. place-items: end center zarovná položky ke spodní hraně a vodorovně na střed.

K dispozici máme i vlastnosti CSS Box Align, řídící rozdělení volného prostoru, který uvnitř kontejneru zůstává mezi položkami.

Zarovnání na blokové ose (obvykle svisle).
Např. align-items: end zarovná položky ke spodní hraně kontejneru.

justify-content

Rozdělení prostoru na řádkové ose (obvykle vodorovně).
Např. justify-content:space-between rozdělí prostor mezi položky.

align-content

Rozdělení prostoru na blokové ose (obvykle svisle).
Např. align-content:start zajistí zarovnání položek k horní hraně kontejneru.

place-content

Zkratka pro rozdělení prostoru v obou směrech.
Např. place-content:start space-between zajistí zarovnání položek k horní hraně kontejneru a vodorovné dělení prostoru mezi položky.

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

Mohou se položky zalamovat? Výchozí stav je nezalamovat.
Např. flex-wrap:wrap – položky se mohou vykreslit na další řádek.

flex-flow

Zkratka pro flex-wrap a flex-direction.
Např. flex-flow:wrap column – položky se zalamují a skládají shora dolů.

Dále lze na kontejner flexboxu aplikovat také vlastnosti zarovnání boxů (CSS Box Alignment):

gap

Definice mezery mezi buňkami.
gap:1rem;

Vlastnosti flexbox položek

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.

flex-grow

Jak moc může položka růst. Výchozí je 0.
Např. flex-grow: 1 – podíl na celku hodnoty 1 z volného prostoru.

flex-shrink

Faktor smršťování položky. Výchozí je 1.
Např. flex-shrink:0 – položka se nesmršťuje.

flex-basis

Výchozí velikost položky. Výchozí je auto.
Např. flex-basis:0 – nehledí se na rozměr obsahu ani width či height.

flex

Zkratka pro vlastnosti flex-grow, flex-shrink a flex-basis.
Např. flex:auto – roste, smršťuje se a rozměr je nastavený na auto.

Také na položky flexboxu můžeme aplikovat vlastnosti zarovnání boxů:

Následujícími vlastnostmi pro konkrétní položku definujeme, jak se bude zarovnávat.

align-self

Zarovnání na blokové ose (obvykle svisle).
Např. align-self:end zarovná položku ke spodní hraně.

place-self

Zkratka pro zarovnání jednotlivé položky v obou směrech.
Např. place-self:end center zarovná položku ke spodní hraně a vodorovně doprostřed.

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

Nyní známe vlastnosti a pojďme prozkoumat použití flexboxu v konkrétní situaci.

Základy v jednoduchém příkladu

Představme si triviální třísloupcový layout:

<div class="container">
  <p class="col col-1">First is loooooong.</p>
  <p class="col col-2">Second is looooonger.<br>…<br>…</p>
  <p class="col col-3">Third is short.</p>
</div>

HTML je jednoduché. O to přísnější máme požadavky na design:

• Všechny sloupce mají být stejně vysoké.
• Layout se při nedostatku místa zalomí.
• První dva sloupce jsou pružné, třetí nikoliv.
• Druhý sloupec se zvětšuje a zmenšuje dvakrát tolik než první.
• Mezi sloupci je mezera 1rem.
• Na menších displejích do 400px se prvky vyskládají pod sebe.

Podívejte se na video „Jak na flexbox, jednorozměrný layout v CSS“. YouTube: youtu.be/de2YWdhgNV8

Všechny sloupce mají být stejně vysoké

Stejná výška prvků platí i v případech, kdy má jeden sloupec delší obsah než zbylé dva. To je to nejjednodušší. Stačí z rodiče pomocí vlastnosti display udělat kontejner flexboxu:

.container {
  display: flex;
}

Layout se při nedostatku místa zalomí

V případě, že zde nebude dost prostoru pro všechny položky, zalomíme. To definujeme pomocí vlastnosti flex-wrap:

.container {
  flex-wrap: wrap;
}

První dva sloupce jsou pružné, třetí nikoliv

Dále jsme si vymysleli, že první dva sloupce se budou zmenšovat a zvětšovat, přičemž druhý dvakrát více než první. Třetí naopak nikoliv, zůstane vždy na svém. Tady pomůže zkratka vlastností položky flexboxu, flex:

/* Pružná položka, zabírá jednu část volného místa: */
.col-1 {
  flex: 1;
}

/* Pružná položka, zabírá dvě části volného místa: */
.col-2 {
  flex: 2;
}  

/* Fixně široká položka: */
.col-3 {
  flex: none;
}

Mezi sloupci je mezera 1rem

Dříve ve flexboxu nebylo možné mezi položkami vytvořit mezery jinak než pomocí vlastností padding nebo margin. Teď už ano. Stačí sáhnout po vlastnosti gap:

.container {
  gap: 1rem;
}

Na menších displejích se změní směr

Na mobilech zpravidla není pro rozvržení prvků vedle sebe prostor. Přidáme proto změnu směru layoutu, což zajistíme vlastností flex-direction:

@media (max-width: 25em) {
  .container {
    flex-direction: column;
  }
}

Na obrázku je vidět, k čemu jsme se dopracovali:

Výsledný příklad si utíkejte vyzkoušet naživo:

Zdroje:

• CSS flexbox: Průvodce všemi vlastnostmi (vzhurudolu.cz)
• CSS Flexbox Layout Guide | CSS-Tricks