Flexbox, zarovnání, rozmístění, mezery

Část 1: Teorie

Co je Flexbox

Flexbox (CSS Flexible Box Layout) je jednorozměrný layout systém v CSS. Rozmísťuje prvky buď v řádku, nebo ve sloupci s velkou kontrolou nad zarovnáním, mezerami a velikostmi.

Krátký kontext

Před Flexboxem se layout dělal různými hacky:

Éra	Technika	Problémy
90. léta	`<table>` pro layout	Sémanticky špatně, neresponzivní
2000-2010	`float: left/right`	Komplikované, vyžadovalo clearfix hacks
2010-2015	`display: inline-block`	Problém s mezerami, vertikálním zarovnáním
2015+	Flexbox	Elegantní, intuitivní, plně podporovaný
2017+	CSS Grid	Pro 2D layout

Flexbox finalizován jako W3C standard v roce 2017, prohlížeče ho podporují od roku 2015. Dnes funguje úplně všude, žádné prefixy nepotřebuješ.

K čemu se hodí

Navbary (logo vlevo, nav vpravo)
Karty v řadě (rovnoměrně rozložené, stejně vysoké)
Vertikální zarovnání (konečně bez hacků)
Footer "vždy dole" (sticky footer)
Layout formulářů
Holy Grail layout (header / sidebar / main / footer)

Flexbox vs Grid: Flexbox = 1D (jen řádek nebo jen sloupec). Grid = 2D (řádky a sloupce současně). Pro layout stránky se kombinují: Grid pro vnější layout, Flexbox uvnitř.

Část 1: Teorie

Co je Flexbox

Krátký kontext

K čemu se hodí

Základní pojmy