CSS3 Flexbox

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.

Vkládaná média se zachováním poměru stran

19. 7. 2017 v příručce

Jak zařídit, aby se obrázky, video a prvky vkládané přes `&lt;iframe&gt;` přizpůsobovaly šířce rodičovského elementu a ještě k tomu zachovávaly poměr stran?

Pár poznámek ke komentářům v CSS

10. 7. 2017 na blogu

Keith J. Grant napsal moc hezký článek o komentářích v CSS: „Thoughts on Self-Documenting CSS“. Tady je to nejdůležitější doplněné o mé poznámky.

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: 27. září.

14. září Mistrovský vývoj webů na WordPressu
5. října Optimalizace rychlosti načítání
19. října SVG
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.

Vydal jsem nový e-book: „Vzhůru do (responzivního) webdesignu“

E-book „Vzhůru do (responzivního) webdesignu“

E-book „Vzhůru do (responzivního) webdesignu“
Jak navrhovat a implementovat responzivní UI?

Více informací