Flexbox – moderní způsob tvorby layoutů

Prosinec 08, 2013
Martin Pešout

Flexbox je nový a velmi mocný nástroj na tvorbu layoutů pomocí CSS. Navíc je zcela odlišný od způsobu, na který jsme tu zvyklý již řadu let. Většina online příruček se zaměřuje na detaily ze samotné specifikace, které bývají dlouhé, složité a těžko srozumitelné. Na druhou stranu je zde poměrně málo informací o tom, jak může být flexbox užitečný fron-end vývojářům při řešení každodenních problémů. Tento článek by měl být takovým úvodem a ukázat možnosti, které nám nabízí při tvorbě layoutu.

Flexbox nabízí v základu 3 vlastnosti, které jsou pro design webu podstatné, ale které bylo těžké dlouhou dobu nadefinovat pomocí CSS: zarovnání, rozmístění a pořadí prvků.

Než přistoupím ke konkrétním ukázkám, tak bych rád zmínil několik věcí, které je dobré znát:

  • Flexbox prošel třemi vývojovými cykly, než byla stanovena současná definice, kterou nalezneme ve specifikaci. Každá z těchto iterací se vyznačovala odlišným názvem a také odlišným prefixem pro různé webové prohlížeče. V současnosti se vše ustálilo a nejnovější prohlížeče podporují jeden konečný název bez nutnosti používat prefix. Nicméně podrporovat na novém webu Flexbox pro starší prohlížeče není vůbec snadná věc. Proto při psaní kódu doporučuji nejprve vše napsat a otestovat pro nejnovější verze prohlížečů a s použitím finální verze Flexbox a až potom vše ladit pro starší prohlížeče.
  • I když Flexbox dokáže spolupracovat s ostatními způsoby tvorby layoutů v CSS, tak je většinou vhodnější tyto původní a zaběhnuté postupy při tvorbě layoutů opustit. Jde totiž o to, že se nově jedná o odlišný způsob návrhu a práce.

Základní ukázky použití vlastnosti Flexbox

Mějme 3 jednoduché <div> elementy, které umístíme dovnitř jednoho společného:

<div id="item-container">
  <div class="circle"></div>
  <div class="square"></div>
  <div class="circle"></div>
</div>

V CSS nadefinujeme styl tak, aby každý z vnořených <div> elementů vypadal stejně jako název třídy, který nese. Vlastnost display: flex nastavíme na vnější společný <div>:

#item-container {
display: flex;
background-color: hsl(34,88%,90%);
}

.square {
height: 200px;
width: 200px;
background-color: hsl(50,88%,50%);
}

.circle {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: hsl(22,88%,50%);
}

Výsledek, který dostaneme, vypadá následujícím způsobem:

Snímek obrazovky 2013-12-08 v 19.12.53

Je potřeba zmínit hned několik důležitých věcí:

  • Nejběžnější vlastnosti „flex“ se používají na nadřazené elementy v HTML. Proto je také v naší ukázce použita definice u prvků s ID #item-container. Toto bývá často zdrojem nejasností, protože většina webových vývojářů je zvyklá pozicovat až konkrétní vnořené elementy.
  • „Block“, „inline“, „float“ a „text-align“ nemají žádný význam mluvíme-li o jednotlivých položkách, na které aplikujeme flexbox zarovnání.
  • Ve výchozím stavu jsou položky zarovnány k levému hornímu rohu nadřazeného elementu.

Další možnosti zarovnání prvků

Na dalším příkladě si ukážeme, jak změnit horizontální zarovnání jednotlivých položek. Výchozí zarovnání doleva je známo jako flex-start. Zarovnat prvky k pravému okraji můžeme provést následujícím způsobem:

#item-container { justify-content: flex-end; }

Snímek obrazovky 2013-12-08 v 20.22.08

Určitě si můžete říkat, že se stále nejedná o nic přelomového. Pojďme si tedy ukázat další možnosti:

#item-container { justify-content: center; }

Snímek obrazovky 2013-12-08 v 20.26.29

Toto je už elegantní řešení. Docílit podobného zarovnání použitím tradičního CSS by obvykle vyžadovalo navíc jeden HTML element a další doplňující CSS definice. Nicméně ještě nejsme v ukázkách u konce.

#item-container { justify-content: space-between; }

Snímek obrazovky 2013-12-08 v 20.32.54

Můžeme vidět, že prostor mezi prvky se rovnoměrně rozproštřel. Toto nastane pouze v situaci, kdy to aplikujeme na dva a více prvků.

Ještě jednu definici zbývá ukázat:

#item-container { justify-content: space-around; }

Snímek obrazovky 2013-12-08 v 20.40.35

Výsledek si lze představit podobně, jako kdyby bylo “margin: 0 auto použito na vše”. Jednotlivé položky jsou opět rovnoměrně rozprostřeny, ale každá zvlášť je navíc vycentrovaná uvnitř přiděleného prostoru.

Tyto ukázky řeší zatím jen horizontální zarovnání. Jaké ale máme možnosti u vertikálního zarovnání?

#item-container { justify-content: space-between; align-items: center; }

Snímek obrazovky 2013-12-08 v 20.48.42

Prostřední prvek nemá kolem sebe žádný prostor navíc, protože je ze všech prvků nejvyšší. Zbývající menší prvky jsou rovnoměrně umístěny na středu vzniklého prostoru.

Další možnosti vertikálního zarovnání jsou následující:

  • flex-start – výchozí nastavení, zarovnání k hornímu okraji obklopujícího HTML elementu
  • flex-end – zarovnání k dolnímu okraji obklopujícího HTML elementu

Flexbox je navíc historicky prvním systémem na tvorbu layoutů, který umožňil definovat pořadí jednotlivých prvků. Pojďme si to ukázat na jednoduchém přikladě: umístíme čtverec před první kruh z naší ukázky:

.square { order: -1; }

Snímek obrazovky 2013-12-08 v 21.05.08

Výsledek je úžasný. Flexbox ruší pevně definované pořadí jednotlivých prvků na našich stránkách. Obvykle by totiž pořadí jednotlivých prvků bylo určeno jejich umístěním ve zdrojovém HTML kódu. Dříve by této změny šlo dosáhnout pouze pomocí JavaScriptu. Je důležité si tedy uvědomit, že váš zdrojový HTML kód zůstává nezměněn. Snadno si to můžete ověřit pomocí volby Zobrazit zdrojový kód ve vašem internetovém prohlížeči.

Flexbox nám nabízí mnohem víc možností při tvorbě designu webových stránek. V tomto článku jsem se snažil na několika jednoduchých ukázkách demonstrovat sílu tohoto nástroje při zarovnávání, které bylo ještě do nedávna nemožné čistě jen za použití CSS.

Zdroje

4 komentářů. Přidat nový

Radek P.
9.12.2013 6:14

Fajné a pěkné. Kapku tady chybí podpora prohlížečů. Když jsem si to dohledal – IE10+ – zatím ještě dlouho nepoužitelné.

Odpovědět

Děkuju za připomínku. Pravda, že jsem se mohl o sekci podporovaných prohlížečů více rozepsat. Popřemýšlím a kdyžtak přidám ještě nějaký doplňujicí článek.

Existuje řada řešení, jak udělat fallback pro starší prohlížeče. Jedno řešení popisuje třeba tento nedávný článek http://designkarma.co.uk/blog/using-flexbox-now nicméně i já přiznávám, že výsledný kód není už tak čistý (je zde navíc spousta definic speciálně pro starší verze prohlížečů).

Odpovědět
Radek P.
10.12.2013 16:49

Koukam na to řešení – síla, aby to člověk řešil pro každý zvlášť.
Nedávno mi kolega říkal o nějaké studii, že ie8 tu bude do roku 2018 (Čína ještě dýl :-) )

Odpovědět
Pavel Bier
11.4.2014 11:04

Tak pokud ale třeba děláš na HTML5 aplikaci pro Chrome Store, tak není důvod nevyužít flexbox, pokud se hodí.

Odpovědět

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Můžete používat následující HTML značky a atributy: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>