Martin Michálek  – 12. 2. 2021

Flex v češtině znamená pružný, přizpůsobivý. Flexboxy jsou tedy pružné elementy layoutu. Jednou z hlavních předností flexboxu je totiž schopnost vyplňovat zbylý prostor.

Toto je referenční příručka s příklady pro všechny vlastnosti, které ve flexboxu můžete používat.

Vlastnosti flexboxu

Vlastnosti se týkají buď kontejneru, tedy rodičovského prvku nebo položek.

Kontejner flexboxu

Hodnota vlastnosti display flex nastaví prvku kontext formátování flexboxem, takže jeho přímí potomkové mohou mít specifické vlastnosti. Možná je také „inline“ hodnota: inline-flex.

flex-wrap

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

flex-direction

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

flex-flow

Zkratka pro flex-wrapflex-direction.
Např. flex-flow:wrap column – položky se zalomují 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;

align-items

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

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.

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.

Položky flexboxu

flex-grow

Jak moc může položka růst. Výchozí je 0.
Např. flex-grow: 1 – bere si podíl v hodnotě 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-shrinkflex-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.

Nyní známe vlastnosti a teď pojďme prozkoumat jednoduchý příklad.

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í.
  • Na menších displejích do 400px se prvky vyskládají pod sebe.

Zkuste si to nakódovat sami, stačí forknout následující CodePen: cdpn.io/e/BaRYjya.

V dalším textu si ukážeme, jak bych postupoval já.

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 změnš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;
}

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

Na mobilech zpravila 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: 400px) {
  .container {
    flex-direction: column;
  }
}

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

Takhle to dopadá, když si flexbox pustíte k tělu.

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



Základní pojmy: flex kontejner, flex položka, hlavní a příčná osa

Flexbox tvoří nerozlučná dvojice dvou typů elementů – flex kontejner a flex položka. Flex položkou se stává každý přímý potomek kontejneru.

<ul class="flex-container">
  <li></li>
  <li></li>
</ul>

Flexbox nadefinujeme snadno jen pomocí flex kontejneru:

.flex-container {
  display: flex;
}

Všechny <li> se tady stávají flex položkami.

Kromě flex kontejnerů a položek nás v dalším textu budou zajímat ještě osy. Ukažme si je na zjednodušeném schématu:

Schéma vnitřních struktur flexboxu.

  • flex kontejner – rodičovský element
  • flex položka – všichni přímí potomci flex kontejneru
  • hlavní osa – výchozí je horizontální, ale lze změnit
  • příčná osa – vždy příčná k hlavní, takže ve výchozí podobě svislá
  • hlavní rozměr – výchozí je šířka, ale řídí se nastavením hlavní osy
  • příčný rozměr – výchozí je výška

Podpora

Dostupnost vlastností flexboxu v prohlížečích je velmi dobrá, vždyť s podporou přišel už Internet Explorer 10! Grafy na CanIUse jsou tedy pěkně zelené. caniuse.com/flexbox

Jak je to krásně zelené! Podpora flexboxu v moderních prohlížečích je takřka bezchybná. Zdroj: CanIUse.com.

Konkrétní podporu je ale potřeba rozpadnout podle jednotlivých vlastností, uvedených výše v tabulce. Tam je situace už různorodější.

Bojem s více či méně příjemnými chybami je provázena práce v Internet Exploreru, protože jde o nejstarší dnes sloužící prohlížeče. Detailně se tím zabýváme v textu o podpoře CSS layoutu v prohlížečích. Není to ale nic vážného, tento prohlížeč od Microsoftu už prakticy vymřel a chyby v něm nejsou tak velké.