Lekce 6 - Flexbox - Tvorba layoutů
V minulé lekci, Responzivní obrázky - Resolution switching a Art direction, jsme si ukázali několik způsobů, jak přizpůsobit obrázky na našem webu.
V tomto tutoriálu responzivního webdesignu se zaměříme na rozvržení obsahu pomocí Flexboxu. Jde o způsob, jak v kontejneru snadno a přehledně uspořádat prvky do řádku nebo sloupců. Flexbox výrazně zjednodušuje tvorbu layoutů, zejména těch sloupcových.
Flexbox
V praxi se layout často řeší přes grid systémy ve frameworkách (např. Bootstrap Grid). Flexbox však zůstává klíčovou součástí CSS a je dobré ho ovládat. Grid systémy probereme v jedné z dalších lekcí. Teď se zaměříme na tvorbu vlastního layoutu pomocí Flexboxu.
Výhody nového stylování
Tento nový druh stylování částečně nahrazuje vytváření sloupců
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í sloupců 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
Jednou z největších nevýhod bylo to, že mnoho prohlížečů flexbox nepodporovali. 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
"sloupce" 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í.
Moderní layout pomocí flexboxu
Ukažme si toto moderní stylování v praxi. Vytvořme si 3 sloupce. První
z nich bude představovat menu (pro příklad bude ve sloupci), 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 nový adresář flexbox/ a v něm soubor
index.html. Kód bude vypadat takto:
<!DOCTYPE html> <html lang="cs"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> <title>Moderní layout pomocí Flexboxu</title> </head> <body> <header> <h1>Moderní layout pomocí Flexboxu</h1> </header> <main id="flexbox"> <nav id="menu"> <ul> <li><a href="#">Úvod</a></li> <li><a href="#">Kontakt</a></li> <li><a href="#">Fórum</a></li> </ul> </nav> <article 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> </article> <aside id="panel"> <h3>Reklama</h3> <p>Tato ukázka byla vytvořena pro <a href="https://www.itnetwork.cz">ITnetwork</a>.</p> </aside> </main> </body> </html>
Výsledek v prohlížeči bude zatím vypadat takto:
Vidíme pouhé HTML bez žádného stylu. Vše je pod sebou a není to ve sloupcích. Pojďme to napravit.
Ve složce flexbox/ si vytvořme další 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
sloupci:
#flexbox { display: flex; flex-wrap: wrap; max-width: 960px; margin: 0 auto; }
Nastavením display: flex vytvoříme z prvku
#flexbox flex-kontejner a jeho přímí potomci se začnou
rozmisťovat pomocí Flexboxu. Vlastnost flex-wrap: wrap umožní,
aby se položky při nedostatku místa zalomily do další řady, což pomáhá
s responzivitou na menších displejích. Pomocí max-width: 960px
omezíme maximální šířku kontejneru, aby se na velkých obrazovkách
příliš neroztahoval. Kód margin: 0 auto pak kontejner
vycentruje (automatické levé a pravé okraje).
Kvůli lepšímu vzhledu nastavíme barvu pozadí všech jednotlivých
částí (menu, obsah, panel) na světle šedou. Selektor
#flexbox > * zajistí, že se styl použije na všechny přímé
potomky kontejneru, ať už jde o div, nav,
article nebo aside. Vlastnost
box-sizing: border-box zaručí, že padding a okraje se
započítají do celkové šířky prvku, což je dnes běžná praxe. Menu i
panel mají nastavený poměr flex: 1, zatímco obsah má
flex: 3, takže výsledně zabírá přibližně tři pětiny
dostupného prostoru:
#flexbox>* { background-color: #dddddd; box-sizing: border-box; } #menu, #panel { flex: 1; } #obsah { flex: 3; }
Výsledek v prohlížeči bude vypadat 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 20 řá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 a obsah s menu se přehodí. Tohle všechno má pouze
26 řádků s mezerami. Přehození s vlastností float by bylo 2×
delší a možná by to ani nebylo podle našich představ.
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 534x (1.86 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS
