FlexBox v praxi: kde sa naozaj používa

Keď už máme za sebou rodiča aj deti, prichádza tá najpraktickejšia časť: ako FlexBox použiť na reálnych príkladoch.

FlexBox v praxi: kde sa naozaj používa

Jedna vec je vedieť, čo robí justify-content alebo flex: 1;, a druhá vec je vedieť, kde to celé dáva zmysel v skutočnom layoute.

FlexBox je veľmi dobrý hlavne tam, kde riešime:

  • prvky vedľa seba
  • zarovnanie na stred
  • medzery medzi boxami
  • jednoduché riadky a stĺpce
  • rozumné správanie na menšej šírke

Na zložité mriežky už býva často lepší Grid, ale na veľa bežných častí webu je FlexBox veľmi pohodlný.

1. Tlačidlá vedľa seba

Toto je jedna z najbežnejších vecí. Máme dve alebo tri tlačidlá a chceme ich mať vedľa seba s medzerou.

Táto ukážka je hlavne na pozretie výsledku.

HTML
<body>
    <h1>blog</h1>

    <div class="ukazka actions">
        <a href="#" class="btn">Uložiť</a>
        <a href="#" class="btn">Zrušiť</a>
    </div>
</body>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ukazka {
  border: 1px solid #a50000;
  padding: 1rem;
}

.actions {
  display: flex;
  gap: 1rem;
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.2rem;
  border: 1px solid #222;
  text-decoration: none;
  color: inherit;
}

 

flexbox btn default

Tu je FlexBox ideálny, lebo rodič len povie: „tieto tlačidlá budú vedľa seba a medzi nimi bude medzera“.

Netreba nič komplikovať.

2. Tlačidlá zarovnané na koniec

Častá situácia je aj taká, že tlačidlá nechceme mať pri začiatku, ale napríklad vpravo.

Táto ukážka je hlavne na pozretie výsledku.

CSS
.actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

 

flexbox flex-end

Tým hovoríme: tlačidlá majú byť v riadku, ale nech sa posunú na koniec hlavnej osi.

Pri predvolenom row to znamená doprava.

3. Jednoduché menu

Menu je ďalší typický príklad. Chceme viac odkazov vedľa seba, s medzerou a často aj zarovnaných na stred.

Táto ukážka je hlavne na pozretie výsledku.

HTML
<body>
    <h1>blog</h1>

    <nav class="ukazka menu">
        <a href="#">Domov</a>
        <a href="#">Služby</a>
        <a href="#">Blog</a>
        <a href="#">Kontakt</a>
    </nav>
</body>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ukazka {
  border: 1px solid #a50000;
  padding: 1rem;
}

.menu {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.menu a {
  border: 1px solid #222;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: inherit;
}

 

flexbox menu-center

Tu je výhoda FlexBoxu v tom, že veľmi rýchlo spraví riadok z odkazov a dovolí nám jednoducho meniť ich rozloženie.

4. Logo vľavo, menu vpravo

Toto je veľmi bežné v hlavičke stránky.

Naľavo je logo, napravo navigácia alebo tlačidlá.

Táto ukážka je hlavne na pozretie výsledku.

HTML
<body>
    <h1>blog</h1>

    <header class="ukazka header">
        <div class="logo">Logo</div>

        <nav class="header-nav">
            <a href="#">Domov</a>
            <a href="#">Blog</a>
            <a href="#">Kontakt</a>
        </nav>
    </header>
</body>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ukazka {
  border: 1px solid #a50000;
  padding: 1rem;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.logo,
.header-nav a {
  border: 1px solid #222;
  padding: 0.75rem 1rem;
}

.header-nav {
  display: flex;
  gap: 1rem;
}

.header-nav a {
  text-decoration: none;
  color: inherit;
}

 

flexbox menu logo

Tu máme vlastne dva FlexBoxy:

  • prvý na celej hlavičke - červený okraj
  • druhý vo vnútri navigácie - zelený okraj

Okraje a malý padding sú použité pre lepšie pochopenie, zvýraznenie bloku. 

FlexBox sa veľmi často používa vnorene. Jeden rodič riadi veľké časti layoutu a vo vnútri ďalší rodič riadi menšie prvky.

5. Karta s obrázkom a textom vedľa seba

Toto je ďalší častý príklad. Naľavo obrázok, napravo text.

Táto ukážka je hlavne na pozretie výsledku.

HTML
<body>
    <h1>blog</h1>

    <article class="ukazka karta">
        <div class="thumb">Obrázok</div>

        <div class="content">
            <h2>Nadpis karty</h2>
            <p>
                Toto je jednoduchý text vedľa obrázka.
                FlexBox tu rieši hlavne rozloženie na dva stĺpce.
            </p>
        </div>
    </article>
</body>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ukazka {
  border: 1px solid #a50000;
  padding: 1rem;
}

.karta {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.thumb {
  width: 180px;
  min-height: 120px;
  border: 1px solid #222;
  padding: 1rem;
}

.content {
  flex: 1;
  border: 1px solid #222;
  padding: 1rem;
}

 

flexbox karta

Tu je FlexBox veľmi prirodzený:

  • obrázok má pevnú alebo približnú šírku
  • textová časť si vezme zvyšok priestoru

A práve tu pekne vidno, kde je flex: 1; praktické.

6. Karty s rovnakou šírkou

Veľmi časté je aj to, že chceme viac kariet vedľa seba a každá má mať rovnaký podiel šírky.

Táto ukážka je hlavne na pozretie výsledku.

HTML
<body>
    <h1>blog</h1>

    <section class="ukazka cards">
        <div class="card">Karta 1</div>
        <div class="card">Karta 2</div>
        <div class="card">Karta 3</div>
    </section>
</body>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ukazka {
  border: 1px solid #a50000;
  padding: 1rem;
}

.cards {
  display: flex;
  gap: 1rem;
}

.card {
  flex: 1;
  border: 1px solid #222;
  padding: 1rem;
}

 

flexbox karty nowrap

Každá karta dostane rovnaký diel z voľného priestoru.

Toto je veľmi pohodlné, keď chceme jednoduchý rad troch alebo štyroch boxov.

7. Karty, ktoré sa zalamujú

Tu už sme v situácii, kde sa oplatí ukážku nielen pozrieť, ale aj skúsiť v editore.

Túto ukážku sa oplatí otvoriť v editore a meniť šírku okna. (pravý horný roh "Edit on CODEPEN")

HTML
<body>
    <h1>blog</h1>

    <section class="ukazka cards-wrap">
        <div class="card">Karta 1</div>
        <div class="card">Karta 2</div>
        <div class="card">Karta 3</div>
        <div class="card">Karta 4</div>
        <div class="card">Karta 5</div>
    </section>
</body>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ukazka {
  border: 1px solid #a50000;
  padding: 1rem;
}

.cards-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 180px;
  border: 1px solid #222;
  padding: 1rem;
}

 

Toto je veľmi praktická kombinácia:

  • flex-wrap: wrap; dovolí zalamovanie
  • flex: 1 1 180px; povie, že karta môže rásť, môže sa zmenšiť a začína približne od 180px

Pri tejto ukážke je výsledok síce dobre vidieť aj na obrázku, ale najlepší zmysel pochopíš až vtedy, keď budeš meniť šírku okna alebo hodnotu 180px.

8. Sidebar a obsah

Toto je ďalší typický layout:

  • vľavo bočný panel
  • vpravo hlavný obsah

Táto ukážka je hlavne na pozretie výsledku.

HTML
<body>
    <h1>blog</h1>

    <div class="ukazka layout">
        <aside class="sidebar">Sidebar</aside>
        <main class="main">Hlavný obsah</main>
    </div>
</body>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ukazka {
  border: 1px solid #a50000;
  padding: 1rem;
}

.layout {
  display: flex;
  gap: 1rem;
}

.sidebar {
  width: 220px;
  border: 1px solid #222;
  padding: 1rem;
}

.main {
  flex: 1;
  border: 1px solid #222;
  padding: 1rem;
}

 

flexbox sidebar

Tento príklad je veľmi podobný karte s obrázkom a textom.

Jeden prvok má približne pevnú šírku a druhý si vezme zvyšok miesta.

9. Centrovanie obsahu na stred

FlexBox je veľmi známy aj tým, že vie jednoducho centrovať obsah.

Táto ukážka je hlavne na pozretie výsledku.

HTML
<body>
    <h1>blog</h1>

    <section class="ukazka center-box">
        <div class="box">Som na strede</div>
    </section>
</body>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ukazka {
  border: 1px solid #a50000;
}

.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  padding: 1rem;
}

.box {
  border: 1px solid #222;
  padding: 1rem 1.5rem;
}

 

flexbox center

Toto je klasický príklad, kde rodič rozhodne o strede a dieťa sa len nechá pekne uložiť.

10. Prvok, ktorý sa nemá zmenšovať

HTML
<body>
    <h1>blog</h1>

    <div class="ukazka media">
        <div class="icon">Ikona</div>
        <div class="text">
            Toto je text vedľa ikony. Keď bude priestoru menej,
            chceme, aby sa skôr lámal text, ale ikona zostala čitateľná.
        </div>
    </div>
</body>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ukazka {
  border: 1px solid #a50000;
  padding: 1rem;
}

.media {
  display: flex;
  gap: 1rem;
}

.icon {
  width: 120px;
  flex-shrink: 0;
  border: 1px solid #222;
  padding: 1rem;
}

.text {
  border: 1px solid #222;
  padding: 1rem;
}

Tu je dôležité práve:

flex-shrink: 0;

 

flexbox shrink 0 full

flexbox shrink 0 min

Tým hovoríme: „ikona sa nemá stláčať“.

Toto je veľmi praktické pri prvkoch, ktoré musia zostať čitateľné alebo mať pevnú podobu.

11. Jeden prvok zarovnaný inak ako ostatné

Občas máme riadok viacerých boxov, ale jeden z nich sa má správať trochu inak.

HTML
<body>
    <h1>blog</h1>

    <div class="ukazka badges">
        <div class="badge">1</div>
        <div class="badge special">2</div>
        <div class="badge">3</div>
    </div>
</body>
CSS
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ukazka {
  border: 1px solid #a50000;
  padding: 1rem;
}

.badges {
  display: flex;
  align-items: center;
  min-height: 180px;
  gap: 1rem;
}

.badge {
  border: 1px solid #222;
  padding: 1rem;
}

.special {
  align-self: flex-end;
}

 

flexbox align-self

Rodič povie: všetci budete zarovnaní na stred.

Ale druhý box povie: ja chcem ísť nižšie.

A presne na to slúži align-self.

12. Kedy ešte FlexBox stačí a kedy už radšej Grid

Toto je veľmi dobrá otázka, lebo veľa ľudí sa snaží riešiť všetko cez FlexBox.

FlexBox je super, keď riešime:

  • jeden riadok prvkov
  • jeden stĺpec prvkov
  • menu
  • tlačidlá
  • hlavičku
  • sidebar a obsah
  • jednoduché karty
  • zarovnanie na stred

Grid býva lepší, keď riešime:

  • väčšiu mriežku
  • presné riadky aj stĺpce naraz
  • galériu
  • dashboard
  • zložitejšie rozloženie sekcií

Dá sa to povedať aj jednoducho:

  • FlexBox = smer
  • Grid = mriežka

Krátke zhrnutie

FlexBox je v praxi výborný hlavne preto, že nám veľmi rýchlo vyrieši bežné rozloženie prvkov.

Nie je to nástroj len na „boxy vedľa seba“. Vie riešiť aj:

  • medzery
  • zarovnanie
  • rozloženie voľného priestoru
  • zalamovanie
  • správanie jednotlivých prvkov

A práve preto sa s ním stretneš skoro na každej stránke: v menu, v kartách, v hlavičke, v tlačidlách aj v jednoduchých layoutoch.