CSS flexbox: Průvodce všemi vlastnostmi

Flexbox je jeden z nových způsobů, jak v CSS zapisovat layout, ale také zarovnání a distribuci volné plochy.

V této aktualizované příručce přibyly texty s příklady pro všechny vlastnosti, které ve flexboxu můžete používat.

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.

Pokud sháníte příručku k vlastnostem flexboxu, tady je.

Všechny vlastnosti

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 vlastosti 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. A víte co? Ukážeme si rovnou, jak je splnit pomocí flexboxu.

V dalším textu kód z CodePenu ještě poctivě vysvětlíme.

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

Ano, i v případech kdy má ten jeden 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

Zároveň 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;
  }
}

Příklad si utíkejte vyzkoušet naživo na CodePen. cdpn.io/e/jOVVeVL

Je to hezké, že?

Flexbox je mistr na layouty komponent

Je dobré zmínit, že flexbox je určený pro layout komponent uvnitř stránek. Tedy navigací, formulářů, stránkovacích komponent atd. atd.

Pro celostránkové layouty se více hodí CSS Grid Layout. Užití flexboxu pro celostránkové layouty je samozřejmě možné. Jen se na velmi pomalých zařízeních nebo internetových připojeních nebude vykreslovat optimálně. Píše o tom třeba Jake Archibald. vrdl.in/zuscj

Šup na základní pojmy — flex kontejner a 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 to 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 implementace v IE, 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.