6. diel - Flexbox - Tvorba moderných layoutov

V minulej lekcii, Responzívne obrázky - Resolution switching a Art redirection, sme si ukázali niekoľko spôsobov, ako prispôsobiť obrázky na našom webe.

CSS3 nám doprialo nové možnosti práce s kontajnermi obsahu. Tomuto pozíciovaniu sa hovorí flexbox. Prinieslo mnoho výhod a uľahčilo prácu najmä pri vytváraní layoutov založených na stĺpčekoch.

CSS Flexbox sa už príliš nepoužíva, namiesto toho je využívaný Bootstrap Grid alebo Flexbox Grid. Tieto dve technológie budeme preberať v jednej z ďalších lekcií Táto lekcia slúži na tvorbu vlastného layoutu.

Výhody nového štýlovania

Tento nový druh štýlovania čiastočne nahrádza vytváranie stĺpčekov pomocou vlastnosti float, kedy sme museli všetko pracne umiestňovať a počítať v percentách či v inej jednotke. Oproti tomu pri flexboxe môžeme nastavovať šírku stĺpcov pomocou čísel (napr. hlavnému nastavíme číslo 4 a vedľajšiemu 1). Dĺžka v pixeloch sa potom sama vypočíta, čím môžeme dosiahnuť jednoducho responzívneho layoutu.

Vytváranie jednoduchého layoutu však nie je všetko. Môžeme tiež meniť poradie stĺpčekov podľa seba, čo sa môže hodiť pri vytváraní responzívneho layoutu, kedy môžeme dať nejaké stĺpce okolo obsahu vedľa seba pri mobilnom dizajne.

Nevýhody

Jednou z najväčších nevýhod bolo, že mnoho prehliadačov flexbox nepodporovalo. Teraz však už všetky prehliadače flexbox podporujú a táto nevýhoda už nie je relevantná.

Používanie

Pre používanie tohto moderného layoutu musíme najskôr obaliť svoje "stĺpčeky" nejakým elementom, ktorému nastavíme vlastnosť display na hodnotu flex. Potom si už svoje stĺpce s obsahom môžeme upravovať pomocou vlastností, ktoré CSS3 na štýlovanie vo flexboxe ponúka.

Prax

Ukážme si toto moderné štýlovanie v praxi. Vytvorme si 3 stĺpčeky. Prvý z nich bude predstavovať menu (pre príklad bude v stĺpčeku), ďalší kontajner s obsahom a posledný postranný panel. Cez pravidlo @media presunieme obsah úplne doľava a menu medzi postranný panel a obsah. Toto pravidlo bude platiť pre displeje užšie ako 700px.

Najskôr si založme nejaký HTML dokument. V ňom budeme mať tento kód:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8" />
        <link type="text/css" rel="stylesheet" href="style.css" />
        <title>Modern layout using flexbox</title>
    </head>

    <body>
        <div id="flexbox">
            <div id="menu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Forum</a></li>
                </ul>
            </div>

            <div id="content">
                <h2>Article</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>Advertisement</h3>
                <p>This demo was created for <a href="http://www.ictdemy.com">ICTdemy</a>.</p>
            </div>
        </div>
    </body>
</html>

Kód si ani nijako popisovať nemusíme. Naše tvorenie bude zatiaľ vyzerať nejako takto:

Creation of flexbox layout – HTML document without CSS - Responzívny webdesign

Vidíme iba HTML bez žiadneho štýlu. Všetko je pod sebou a nie je to v stĺpčekoch. Poďme to napraviť.

Vytvorme si súbor style.css, kde budeme mať štýly k HTML dokumentu. Najskôr si vytvoríme štýly pre hlavný kontajner (ID flexbox) s našimi stĺpčekmi:

#flexbox {
    display: flex;
    max-width: 960px;
    margin: auto;
}

Tu nastavujeme vlastnosť display na hodnotu flex. Ak súbor uložíme, uvidíme, že sa nám už vytvorili samé stĺpčeky, ktoré sú na seba natlačené. Okrem tejto vlastnosti nastavujeme maximálnu šírku 960px, aby sa šírka celého kontajnera nastavovala podľa šírky okna prehliadača. Pre väčšie monitory ešte nastavujeme, aby sa všetko zarovnalo na stred:

#flexbox div {
    background-color: #DDDDDD;
}

#menu, #panel {
    flex: 1;
}

#content {
    flex: 3;
}

Kvôli lepšiemu vzhľadu nastavujeme farbu pozadia všetkých jednotlivých stĺpčekov na sivú. Potom nastavujeme pre menu a panel šírku na 1/5 (spolu 2/5) a zostávajúce 3/5 má obsah.

Momentálne naše snaženie vyzerá takto:

Creation of flexbox layout – deployment of CSS styles - Responzívny webdesign

Môžeme vidieť, že každý stĺpec má svoje miesto. Keď zmenšíme okno, uvidíme, že sa šírka celého dokumentu prispôsobuje a šírka každého stĺpca sa stále správne rozdeľuje, čo je snáď tá najväčšia výhoda flexboxu. Navyše sme toho ani veľa nenapísali. Celý CSS dokument aj s medzerami má iba 17 riadkov! Bez flexboxu by sme pravdepodobne napísali 2× viac kódu, keby sme to tiež chceli mať aj takto responzívne.

Okrem týchto výhod si ešte všimnite, že výška každého stĺpca je rovnaká a nezáleží na jeho obsahu. Tým pádom sa teda zafarbí aj každý stĺpec rovnako na rozdiel od vlastnosti float, kde by farba pozadia pôsobila iba na obsah toho stĺpca.

Prehodenie stĺpcov

Na začiatku sme si ešte sľubovali, že prehodíme obsah na prvej pozícii, keď je okno prehliadača užšie ako 700px. Na to bude stačiť iba pár riadkov:

@media screen and (max-width: 700px) {
    #content {
        order: -1;
    }
}

Teraz zmeny uložme a zmeňme šírku okna webového prehliadača. Výsledok bude vyzerať podľa našich predstáv:

Creation of flexbox layout – document responsivity - Responzívny webdesign

Všetko sa prispôsobuje, obsah s menu sa prehodí. A toto všetko má iba 23 riadkov s medzerami! Prehodenie s vlastnosťou float by bolo 2× dlhšie a možno by to ani nebolo podľa našich predstáv.

Záver

Štýlovanie cez flexbox je budúcnosťou moderných layoutov. Je jednoduché a ušetrí nám prácu. Responzívny dizajn sa tiež vytvára veľmi ľahko (viď ukážka).

V budúcej lekcii, Úvod do CSS grid systémov, sa pozrieme na grid systémy.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.