Flexbox – moderní způsob tvorby layoutů

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:

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; }

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; }

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; }

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; }

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; }

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; }

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

• A Designer’s Guide to Flexbox