Lekce 6 - Flexbox - Tvorba moderních layoutů
V minulé lekci, Responzivní obrázky - Resolution switching a Art redirection, jsme si ukázali několik způsobů, jak přizpůsobit obrázky na našem webu.
CSS 3 nám dopřálo nové pracování s kontejnery obsahu. Tomuto pozicování se říká flexbox. Přineslo mnoho výhod a ulehčilo práci zejména při vytváření layoutů založených na sloupečcích.
CSS Flexbox se už příliš nepoužívá, namísto toho je
využíván Bootstrap Grid nebo Flexbox Grid. Tyto dvě technologie budeme
probírat z jedné dalších lekcí 
Tato lekce slouží k tvorbě vlastního layoutu.
Výhody nového stylování
Tento nový druh stylování částečně nahrazuje vytváření sloupečků pomocí vlastnosti float, kdy jsme museli vše pracně umisťovat a počítat v procentech či v jiné jednotce. Oproti tomu u flexboxu můžeme nastavovat šířku sloupců pomocí čísel (např. hlavnímu nastavíme číslo 4 a vedlejšímu 1). Délka v pixelech se pak sama vypočítá, čímž můžeme dosáhnout jednoduše responzivního layoutu.
Vytváření jednoduchého layoutu však není vše. Můžeme též měnit pořadí sloupečků podle sebe, což se může hodit pro vytváření responzivního layoutu, kdy můžeme dát nějaké sloupce okolo obsahu vedle sebe u mobilního designu.
Nevýhody
Jedna z největších nevýhod bylo to, že mnoho prohlížečů flexbox nepodporují. Nyní však všechny prohlížeče flexbox podporují a taková nevýhoda již není relevantní.
Používání
Pro používání tohoto moderního layoutu musíme nejdříve obalit svoje "sloupečky" nějakým elementem, kterému nastavíme vlastnost display na hodnotu flex. Poté si již své sloupce s obsahem můžeme upravovat pomocí vlastností, které CSS 3 ke stylování ve flexboxu nabízí.
Praxe
Ukažme si toto moderní stylování v praxi. Vytvořme si 3 sloupečky. První z nich bude představovat menu (pro příklad bude ve sloupečku), další kontejner s obsahem a poslední postranní panel. Přes pravidlo @media přesuneme obsah úplně doleva a menu mezi postranní panel a obsah. Toto pravidlo bude platit pro displeje užší než 700px.
Nejdříve si založme nějaký HTML dokument. V něm budeme mít tento kód:
<!DOCTYPE html> <html lang="cs-cz"> <head> <meta charset="utf-8" /> <link type="text/css" rel="stylesheet" href="style.css" /> <title>Moderní layout pomocí flexboxu</title> </head> <body> <div id="flexbox"> <div id="menu"> <ul> <li><a href="#">Úvod</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Fórum</a></li> </ul> </div> <div id="obsah"> <h2>Článek</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div id="panel"> <h3>Reklama</h3> <p>Tato ukázka byla vytvořena pro <a href="http://www.itnetwork.cz">ITnetwork</a>.</p> </div> </div> </body> </html>
Kód si ani nijak popisovat nemusíme. Naše tvoření bude zatím vypadat nějak takto:
Vidíme pouhé HTML bez žádného stylu. Vše je pod sebou a není to ve sloupečcích. Pojďme to napravit.
Vytvořme si soubor style.css, kde budeme mít styly k HTML dokumentu. Nejdříve si vytvoříme styly pro hlavní kontejner (ID flexbox) s našimi sloupečky.
#flexbox { display: flex; max-width: 960px; margin: auto; }
Zde nastavujeme vlastnost display na hodnotu flex. Pokud soubor uložíme, uvidíme, že se nám již vytvořily samy sloupečky, které jsou na sebe namačkané. Krom této vlastnosti nastavujeme maximální šířku 960px, aby se šířka celého kontejneru nastavovala podle šířky okna prohlížeče. Pro větší monitory ještě nastavujeme, aby se vše zarovnalo na střed.
#flexbox div { background-color: #DDDDDD; } #menu, #panel { flex: 1; } #obsah { flex: 3; }
Kvůli lepšímu vzhledu nastavujeme barvu pozadí všech jednotlivých sloupečků na šedou barvu. Poté nastavujeme menu a panelu šířku o 1/5 (dohromady 2/5) a zbývající 3/5 má obsah.
Momentálně naše snažení vypadá takto:
Můžeme vidět, že každý sloupec má své místo. Když zmenšíme okno, uvidíme, že se šířka celého dokumentu uzpůsobuje a šířka každého sloupce se pořád spravedlivě rozděluje, což je snad ta největší výhoda flexboxu. Navíc jsme toho ani moc nenapsali; celý CSS dokument i s mezerami má pouze 17 řádků! Bez flexboxu bychom pravděpodobně napsali 2× více kódu, kdybychom to taky chtěli mít i takto responzivní.
Krom těchto výhod si ještě všimněte, že výška každého sloupce je stejná a nezáleží na jeho obsahu. Tím pádem se tedy zabarví i každý sloupec stejně na rozdíl od vlastnosti float, kde by barva pozadí působila pouze na obsah toho sloupce.
Přehození sloupců
Na začátku jsme si ještě slibovali, že přehodíme obsah na první pozici, když je okno prohlížeče užší než 700px. Na to bude stačit pouze pár řádků:
@media screen and (max-width: 700px) { #obsah { order: -1; } }
Teď změny uložme a změňme šířku okna webového prohlížeče. Výsledek bude vypadat podle našich představ:
Vše se přizpůsobuje, obsah s menu se přehodí. A tohle všechno má pouze 23 řádků s mezerami! Přehození s vlastností float by bylo 2× delší a možná by to ani nebylo podle našich představ.
Závěr
Stylování přes flexbox je budoucnost moderních layoutů. Je jednoduchý a ušetří nám práci. Responzivní design se též vytváří velmi snadno (viz. ukázka).
V příští lekci, Úvod do CSS grid systémů, se podíváme na grid systémy.
Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.
Stáhnout
Stažením následujícího souboru souhlasíš s licenčními podmínkami
Staženo 507x (964 B)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS
