Martin Michálek Martin Michálek  – 12. 2. 2021

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.

Vlastnost Co dělá a příklad
flex-wrap
Vlastnost flex-wrap
Definuje, zda se položky mohou zalamovat na více řádků nebo ne. Výchozí je nezalamovat.
Např. flex-wrap: wrap – položky se mohou vykreslit na další řádek.
flex-direction
Vlastnost 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
Vlastnost flex-flow
Zkratka pro flex-wrap a flex-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):

Vlastnost Co dělá a příklad
justify-items
Vlastnost justify-items
Zarovnání na řádkové ose (obvykle vodorovně).
Např. justify-items: center centruje všechny položky.
align-items
Vlastnost align-items
Zarovnání na blokové ose (obvykle svisle).
Např. align-items: end zarovná položky ke spodní hraně kontejneru.
place-items
Vlastnost 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.

Vlastnost Co dělá?
justify-content
Vlastnost justify-content
Rozdělení prostoru na řádkové ose (obvykle vodorovně).
Např. justify-content: space-between rozdělí prostor mezi položky.
align-content
Vlastnost 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
Vlastnost 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

Vlastnost Co dělá a příklad
flex-grow
Vlastnost 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
Vlastnost flex-shrink
Faktor smršťování položky. Výchozí je 1.
Např. flex-shrink: 0 – položka se nesmršťuje.
flex-basis
Vlastnost flex-basis
Výchozí velikost položky. Výchozí je auto, tzn. podle width nebo height.
Např. flex-basis: 0 – nehledí se na rozměr obsahu ani width či height.

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.

Vlastnost Co dělá?
justify-self
Vlastnost justify-self
Zarovnání na řádkové ose (obvykle vodorovně).
Např. justify-self: center vodorovně centruje položku.
align-self
Vlastnost align-self
Zarovnání na blokové ose (obvykle svisle).
Např. align-self: end zarovná položku ke spodní hraně.
place-self
Vlastnost 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 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:

flexbox schéma

  • 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á Philip Walton v repozitáři Flexbugs. github.com/philipwalton/flexbugs

Komentáře

Váš názor? Vaše zkušenosti? Našli jste chybu?