CSS flexbox: Průvodce všemi vlastnostmi

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.

Položky flexboxu

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:

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:

• 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

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