Flexbox - Tvorba moderních layoutů

HTML a CSS Responzivní webdesign Flexbox - Tvorba moderních layoutů

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.

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

Jednou z největších nevýhod je to, že mnoho vlastností ve flexboxu starší prohlížeče, které byly +/- vydány před rokem 2012, nepodporují. Řešením může být vytvoření vlastního layoutu pro ty starší prohlížeče (např. přes již uvedenou vlastnost float). Nebo můžeme uživatele upozornit, aby si stáhl novější verzi prohlížeče.

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:

Tvoření flexbox layoutu – HTML dokument bez CSS

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:

Tvoření flexbox layoutu – nasazení CSS stylů

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:

Tvoření flexbox layoutu – responzivita dokumentu

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).


 

Stáhnout

Staženo 104x (964 B)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

  Aktivity (1)

Článek pro vás napsal IT Man
Avatar
Autor se primárně věnuje vývoji webových stránek v PHP a v JavaScriptu (knihovna jQuery). Napsal část manuálu HTML 5 a CSS 3, kde má celkem velký přehled. Jednoduše má v oblibě weby.

Jak se ti líbí článek?
Celkem (17 hlasů) :
4.176484.176484.176484.17648 4.17648


 


Miniatura
Předchozí článek
Dokonalá HTML hlavička - 2. díl
Miniatura
Všechny články v sekci
Responzivní webdesign

 

 

Komentáře

Avatar
Michal Žůrek (misaz):

možná bych doplnil, že některé trochu starší prohlížeče, tady tyto vlastnosti podporují, ale ne podpojmem flexbox, ale jako grid layout. Toto je přesně ten případ kdy v ponděli něco v standartu bylo tak, a v úterý to změnili na něco jiného. Některé prohlížeče (dokonce i Internet Explorer) to naimplementovali a pak to museli měnit.

Odpovědět  +4 16.8.2015 12:08
Nesnáším {}, proto se jim vyhýbám.
Avatar
Martin Novotný:
  1. je někde přehled které prohlížeče od které verze to podporují?
  2. lze některým sloupcům nastavit pevnou velikost? (aby se měnila šířka např. jen toho obsahového a menu a reklama byly fixní)
 
Odpovědět  +1 20.8.2015 9:23
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Martin Novotný
IT Man:
  1. To je podle vlastností. U IE to je občas 10+, většinou ale 11. Safari to je 7+, Chrome 21+, Opera 12+ a Mozilla Firefox 18+. Ale jedná se opravdu o vlastnosti jednotlivé a musí tam být prefix.
  2. Brzo vyjdou manuály na všechny vlastnosti flexboxu. A ano, to jde. Mrkni pak na flex-basis. :)
Editováno 20.8.2015 9:44
Odpovědět 20.8.2015 9:43
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Vakos
Redaktor
Avatar
Odpovídá na Martin Novotný
Vakos:

Na podporu prohlížečů mrkni zde http://caniuse.com/

Odpovědět  +1 20.8.2015 9:46
"Jediný způsob, jak dělat skvělou práci, je milovat to, co děláte. Pokud jste to ještě nenašli, hledejte dál. Ne...
Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Dementní článek. Článek o Flexboxu a ukážeš jen zlomek toho, co umí, a to ještě ne moc přívětivým komentováním, a i zbytečným.

Flexbox do CSS hlavně přináší (konečně) možnost POZICOVÁNÍ. Všechno doposud byly totiž v podstatě CSS hacky...

Přepracuj článek, vynech zbytečnou omáčku jak se hezky styluje stránka a ukaž raději přehled toho, co flexbox doopravdy umí a v čem boduje. :)

Odpovědět  -7 18.9.2015 18:21
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
patrik.valkovic
Šéfredaktor
Avatar
Odpovědět 18.9.2015 20:37
Nikdy neumíme dost na to, abychom se nemohli něco nového naučit.
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Honza Bittner
IT Man:

To co ty píšeš uvádím hned na začátku článku. :)
Nemohl by jsi mi prosím navrhnout nějakou konkrétnější úpravu? Editaci článku se nebráním.

Odpovědět 19.9.2015 9:59
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na IT Man
Honza Bittner:

http://www.itnetwork.cz/…5fc704792e2a

Tohle je perfektní článek o Flexboxu. Ty uvádíš jen pár věcí z celé škály možností. ;-)

Jelikož jsem strašně hodný člověk, pošlu další cool flexbox odkazy. Některé jsou články, některé interaktivní "aplikace".

Odpovědět  -2 19.9.2015 10:25
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
David Čápka:

Ten odkaz co jsi uvedl vede na tvou diskuzi, ne na článek o Flexboxu. Můžeš uvést odkaz, který jsi měl na mysli?

Odpovědět  +1 19.9.2015 10:49
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na David Čápka
Honza Bittner:

Koukám, že se mi nezkopíroval, nevšiml jsem si toho.

https://css-tricks.com/…-to-flexbox/

Vážně parádní článek. :)

Odpovědět  +3 19.9.2015 10:52
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.