CSS3 Flexbox: layout pomocí pružných boxů

Co je flexbox?

Nová cesta pro tvorbu layoutu, zarovnání a distribuci volné plochy.

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 bez nutnosti přepočítávání javascriptem.

Základy v jednoduchém příkladu

Představme si triviální třísloupcový layout:

<div class="container">
  <p class="mandatory-1">One</p>
  <p class="content">Two<br/>…<br/>…</p>
  <p class="mandatory-2">Three </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.

  1. Všechny sloupce stejně vysoké. Ano, i v případech kdy má ten jeden delší obsah než zbylé dva. To je to nejjednodušší. Stačí z rodiče udělat kontejner flexboxu – .container { display: flex; }.
  2. Chceme pětinovou mřížku. První a třetí sloupec má zabírat jednu pětinu – .mandatory-1, .mandatory-2 { flex: 1; }. A druhý pak tři pětiny – .content { flex: 3 }. Všimli jste si, že jsme nemuseli počítat s procenty? A že bychom nemuseli procenta přepočítávat, když bychom přidali další sloupec?
  3. Na menších rozlišeních chceme změnit pořadí elementů. Prostě jen do media query napíšeme .content { order: -1; }, a sloupec s obsahem se přesune na první místo. Bomba pro responzivní design, že?

Text je součástí mého ebooku Vzhůru do CSS3, který exkluzivně obsahuje také další materiál o flexboxu, CSS3 a moderní webové kodéřině obecně.

Koupit ebook za 249 Kč


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

Je to hezké, že? Ale skeptik by zamručel, že se CSSko konečně naučilo to, co jsme uměli pomocí „tabulkového layoutu“ v roce 2001. Jenže pravdu by měl jen z velmi malé části. Flexbox toho totiž umí daleko (daleko!) více než tabulky.

Proč potřebujeme flexbox?

Dovolte nejprve otázku. Jak dnes v CSS děláme layouty?

Floaty, inline-blockem, absolutním pozicováním nebo přes display: table. A víte, co mají všechny společného? Ani jeden nebyl vymyšlen pro tvorbu dnešních layoutů. Ano, flexbox je první layoutovací nástroj v CSS. „Po dvaceti letech,“ prohodil by pod fousy náš bručoun.

Floaty, tabulky a jejich parta Layoutovacích technik nad hrobem samozřejmě ještě pár měsíců až let poslouží. Každý člen skupiny má ovšem pro tvorbu layoutů větší či menší nevýhody. Ty vyplývají už ze specifikací, které s dnešními layouty příliš nepočítaly.

Hlavně 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í CSS3 Grid Layout. Ten má ovšem zatím jen malou podporu v prohlížečích. 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

Poznámka: Ukázky kódu v článku obsahují pouze standardní syntaxi podle CSS3 norem. Ve některých případech je potřeba použít vendor prefix varianty. Na aktuální situaci se podívejte na shouldiprefix.com.

Komentáře

comments powered by Disqus

Podobné články

zařazené v kategorii CSS.

PostCSS jako jednoduchá náhrada preprocesoru

16. 2. 2017 v příručce

Jak PostCSS využít jako jednoduchý a rychlý preprocesor, který vám na spoustu projektů výborně poslouží. A proč ne CSSnext?

Jak v NejŘemeslníci.cz používají Tachyons

7. 2. 2017 na blogu

Matouš Borák z NejŘemeslníci.cz popisuje zkušenosti svého týmu s Tachyons, knihovnou atomických stylů.

Veřejná školení

Dnešní webová kodéřina

Dnešní webová kodéřina

Kurz, který aktualizuje vaše znalosti webové kodéřiny. Citlivě mixuje novinky jako CSS3, Flexbox nebo SVG a osvědčené postupy. Ty nejdůležitější části si sami vyzkoušíte. Příští termín: 26. září.

29. května Optimalizace rychlosti načítání
1. června Mistrovský vývoj webů na WordPressu
19. října SVG
2. listopadu Bootstrap pro pokročilé
16. listopadu Principy Javascriptu

Cena kurzů je 4 490 Kč bez DPH. Dřívější zákazníci mají 10 % slevu.
Všechny se konají v KC Greenpoint Praha.
Můžete si je také objednat do firmy.

Ebook „Vzhůru do CSS3“

Ebook „Vzhůru do CSS3“

Pořiďte si můj ebook „Vzhůru do CSS3“.
o nových CSS vlastnostech a moderní kodéřině.

Koupit za 249 Kč