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.

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 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 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:

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

Flexbox tvoří nerozlučná dvojice dvou typů elementů – flexboxový kontejner a položka flexboxu. Flexboxovou 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í kontejneru flexboxu:

.flex-container {
  display: flex;
}

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

Kromě flexboxových 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:

• kontejner flexboxu – rodičovský element
• flexboxová položka – všichni přímí potomci kontejneru
• hlavní osa – výchozí je vodorovná, ale toto lze změnit
• příčná osa – vždy příčná k hlavní, takže ve výchozí podobě je 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 rozdělit podle jednotlivých vlastností uvedených výše v tabulce. Tam už je situace různorodější.