Flexbox nebo mřížka?

Máme k dispozici dva pružné a schopné nástroje pro rozmisťování prvků na stránce a v jejích částech: flexbox a mřížku. Vynořuje se přirozená otázka, kdy který z nich použít.

Základní vymezení je jednoduché. Flexbox je určen k rozmístění prvků podél jedné osy, tedy vedle sebe nebo nad sebou. Naproti tomu mřížka je dvoudimenzionální a rozmisťuje prvky v ploše. V praxi jsou ale jako obvykle věci složitější a pokud ve flexboxu povolíte flex-wrap, nebo do svisle orientovaného flexboxu vložíte vodorovně orientovaný, může se pustit i do druhé dimenze.

Nicméně obecně platí, že flexbox je vhodný pro jednodušší případy, zatímco pokud si chcete s rozložením prvků zadivočit, nejspíš vám lépe poslouží mřížka.

Hlavní kouzlo spočívá v tom, že to není buď a nebo. Nemusíte si vybrat jen jeden nástroj a toho se za každou cenu držet. Obvykle bývá nejvýhodnější kombinovat oba a pro danou komponentu použít ten z nich, který je vhodnější. Typický případ: celkové rozložení stránky definujete pomocí mřížky a v jejích jednotlivých komponentách, jako jsou prvky záhlaví, zápatí nebo menu, nasadíte flexboxy. Takovou kombinaci dnes potkáte na každém rohu.

Můžete je samozřejmě libovolně vnořovat a kombinovat. Je-li prvek mřížky vnitřně složitý, můžete jej definovat jako další (vnořenou) mřížku, která má svou vlastní definici osnovy. Žádnou výjimkou také nejsou flexboxy ve flexboxech, někdy s odlišně orientovanou hlavní osou, jindy ne. Možnosti jsou zkrátka bezbřehé a záleží vždy na konkrétní situaci, jaké řešení použít.

Příklad

Podívejme se na příklad „jako ze života“. Máme stránky fiktivní organizace, které mají záhlaví s logem a hlavním menu, pod ním hlavní text a vedle něj sekundární menu a dole zápatí s odkazy na sociální sítě a případnými dalšími odkazy. Vyrobil jsem dvě varianty její realizace, které vizuálně vypadají stejně:

Vnořené flexboxy

Tělo stránky je tvořeno svislým flexboxem, jehož prostředním prvkem je vodorovný flexbox obsahující hlavní text a sekundární menu. Kromě toho jsou pomocí flexboxů implementovány záhlaví i zápatí.

Mřížka

Rozložení hlavních komponent (záhlaví, zápatí, hlavní text, sekundární menu) je definováno pomocí mřížky. HTML kód se téměř nezměnil. Jediným rozdílem je, že v předchozí variantě je sekundární menu (prvek <aside>) vnořeno v <main>, zatímco zde je vedle něj. Záhlaví i zápatí jsou i zde realizovány flexboxy.

Prohlédněte si a porovnejte jejich zdrojové kódy (Ctrl-U v prohlížeči). Z pohledu uživatele vypadají a chovají se stejně, přestože jsou realizovány jinými prostředky. Kterému dáte přednost? Je to na vás.

Řešení s mřížkou obecně poskytuje větší možnosti pro uspořádání prvků a jejich změny pro responzivní design. U takto jednoduché stránky rozdíl nebude veliký, v první variantě by nejspíš stačilo při úzkém okně otočit směr flexboxu s hlavním textem na svislý, ve druhé předefinovat mřížku a rozložení oblastí v ní. S rostoucí složitostí stránky bude získávat mřížka navrch, ve vícenásobně vnořovaných flexboxech se člověk snadno ztratí.