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.

CSS 3 nám doprialo nové pracovanie s kontajnermi obsahu. Tomuto pozíciovanie sa hovorí flexbox. Prinieslo mnoho výhod a uľahčilo prácu najmä pri vytváraní layoutov založených na stlpcoch.

Výhody nového štýlovanie

Tento nový druh štýlovanie čiastočne nahrádza vytváranie stĺpcov pomocou vlastnosti float, kedy sme museli všetko pracne umiestňovať a počítať v percentách či v inej jednotke. Oproti tomu u flexboxu 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 responzivního layoutu.

Vytváranie jednoduchého layoutu však nie je všetko. Môžeme tiež meniť poradie stĺpcov podľa seba, čo sa môže hodiť pre vytváranie responzivního layoutu, kedy môžeme dať nejaké stĺpca okolo obsahu vedľa seba u mobilného dizajnu.

Nevýhody

Jednou z najväčších nevýhod je to, že mnoho vlastností vo flexboxu staršie prehliadače, ktoré boli +/- vydané pred rokom 2012, nepodporujú. Riešením môže byť vytvorenie vlastného layoutu pre tie staršie prehliadače (napr. Cez už uvedenú vlastnosť float).

Aktuálne už 97.6% ľudí používa taký prehliadač, aby podporoval flexbox aj bez prefixu. S prefixom to je už 98.62% podľa štatistík stránky Can I Use.

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é CSS 3 ku štýlovanie vo flexboxu ponúka.

Praxe

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ý bočný panel. Cez pravidlo @media presunieme obsah úplne doľava a menu medzi bočný panel a obsah. Toto pravidlo bude platiť pre displeje užší ako 700px.

Najskôr si založme nejaký HTML dokument. V ňom budeme mať 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 nijako popisovať nemusíme. Naša tvorenie bude zatiaľ vyzerať nejako takto:

Tvorenie flexbox layoutu – HTML dokument bez CSS - Responzívne webdesign

Vidíme obyčajné HTML bez žiadneho štýlu. Všetko je pod sebou a nie je to v stĺpcoch. 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čeky.

#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 zarovnali na stred.

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

#menu, #panel {
    flex: 1;
}

#obsah {
    flex: 3;
}

Kvôli lepšiemu vzhľadu nastavujeme farbu pozadia všetkých jednotlivých stĺpcov na šedú farbu. Potom nastavujeme menu a panela šírku o 1/5 (dohromady 2/5) a zvyšné 3/5 má obsah.

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

Tvorenie flexbox layoutu – nasadenie CSS štýlov - 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 uspô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 taky 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žší ako 700px. Na to bude stačiť len pár riadkov:

@media screen and (max-width: 700px) {
    #obsah {
        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:

Tvorenie flexbox layoutu – responzivita dokumentu - 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šia 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ívne dizajn sa tiež vytvára veľmi ľahko (viď. Ukážka).

V ďalšej lekcii, Grid systém od Flexbox Grid , si rozšírime znalosti ohľadom grid systému od flexboxgrid.com.

Stiahnuť

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

Stiahnuté 481x (964 B)
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