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é pracovanie 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ť z jednej ďalších lekcií Táto lekcia slúži na tvorbu vlastného layoutu.

Výhody nového štylovania

Tento nový druh štylovania č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ť na vytváranie responzívneho layoutu, kedy môžeme dať nejaké stĺpce okolo obsahu vedľa seba pri mobilnom dizajne.

Nevýhody

Jedna z najväčších nevýhod bolo to, že mnoho prehliadačov flexbox nepodporujú. Teraz však všetky prehliadače flexbox podporujú a taká 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.

Praxe

Ukážme si toto moderné štylovanie 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.itnetwork.cz">ITnetwork</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ívne 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. Pokiaľ 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ĺpikov na šedú farbu. Potom nastavujeme pre menu a panel šírku o 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ívne 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 spravodlivo rozdeľuje, čo je snáď tá najväčšia výhoda flexboxu. Navyše sme toho ani veľmi 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ívnu.

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ívne 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ť 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š.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 2x (1.62 kB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

Článok pre vás napísal Jan Lupčík

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

Autor se primárně věnuje vývoji webových stránek a aplikací v PHP (framework Laravel) a je jedním z herních vývojářů komunitní modifikace TruckersMP.

Aktivity