Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu. Zároveň využij narozeninovou akci až 80 % zdarma při nákupu e-learningu - Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Python week + discount 80

7. diel - Grid systém od Flexbox Grid

V predchádzajúcej lekcii, Úvod do CSS grid systémov , sme sa naučili, aké sú možnosti grid systémov.

Keď už teraz vieme, ako grid systémy fungujú, poďme si viac dopodrobna predstaviť Flexbox Grid. V dnešnej lekcii si tento framework preberieme podrobnejšie tak, aby ste ho boli schopní bez problémov používať na svojom projekte.

Hraničnými

U príklade v minulej lekcii sme trochu načali hraničnými v tomto frameworku. Pre úplnosť si to ešte raz zopakujme podrobnejšie.

Vo Flexbox Grid máme 4 druhy Breakpoint:

  • xs-Y - element bude široký Y stĺpcov na veľmi malých zariadeniach a väčších (teda na všetkých)
  • sm-Y - element bude široký Y stĺpcov na malých zariadeniach a väčších
  • md-Y - element bude široký Y stĺpcov na stredne veľkých zariadeniach a väčších
  • lg-Y - element bude široký Y stĺpcov na veľkých zariadeniach

Ako už vieme z príkladu z minula, tento kód:

<div class="row">
      <div class="col-xs-3">Čtvrtina</div>
      <div class="col-xs-3">Čtvrtina</div>
      <div class="col-xs-6">Polovina</div>
</div>

nám rozdelí stránku na 3 stĺpce. Tak stránka bude vyzerať od najmenších zariadeniach, až po tie najväčšie. Je to z dôvodu, že sme použili identifikátor xs. Daný breakpoint totiž vždy zahŕňa aj všetky nad ním, pokiaľ nie je určené inak.

Ako ste si sami mohli všimnúť, ukážka vyššie nie je úplne responzívne, pretože sme hodnoty pre stĺpce nastaviť už od úplne najmenšieho Breakpoint. Nie je teda možnosť, aby sa stĺpce samy roztiahli po celej obrazovke, pretože aj na tom najmenej širokom displeji máme vynútené 3 stĺpce. Ak by sme teraz do stĺpcov pridali viac textu, výsledok by na malých zariadeniach nebol nijako úchvatný.

Riešenie

Určite vás už asi napadlo, ako tento problém vyriešiť. Jednoducho počet stĺpcov nastavíme od širších zariadení a na tých malých zmeníte nastavenie tak, aby sa zobrazovali cez celú obrazovku (tá má 12 potenciálnych stĺpcov). Kód by vyzeral takto:

<div class="row">
      <div class="col-xs-12 col-md-3">Čtvrtina</div>
      <div class="col-xs-12 col-md-3">Čtvrtina</div>
      <div class="col-xs-12 col-md-6">Polovina</div>
</div>

Môžeme rovno použiť aj nejaké to CSS, nech ukážku lepšie pochopíme:

.text-center {
  text-align: center;
}

.background-primary {
  background-color: red;
}

.background-secondary {
  background-color: green;
}

výsledok:

Your page
localhost

Stĺpčeky sa nám na zariadení typu xs a sm roztiahnu po celej šírke (12 stĺpcov), zatiaľ čo od md (teda aj lg - pretože nie je definované inak) sa utvorí do stĺpcov v pomere 3/3/6.

Toto bola len malá ukážka toho, ako môžeme jednoducho upravovať veľkosť stĺpca na zariadeniach, vždy môžete pridať až 4 možnosti sloupcování.

Dôležité

Pri používaní Flexbox Grid by sme nemali používať margin. Stĺpce majú totiž presne definovanú šírku a pokiaľ ju narušíme vlastností margin, celková šírka nám môže pretiecť:

Your page
localhost
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

Vlastnosť margin preto používať nebudeme. Namiesto toho môžeme nejako vhodne použiť padding alebo do stĺpca vložiť ďalšiu element a tomu potom margin nastaviť, apod. Riešenie je veľa:)

Automatická šírka

Ak budeme používať automatickú šírku na stĺpikoch, problém vyššie riešiť nemusíme. Tá sa definuje tak, že jednoducho za .col-X už nenapíšeme žiadne číslo. Ak majú všetky elementy v .row nastavenú automatickú šírku, potom sú stĺpce všetky rovnaké a je jedno, koľko v nich máme obsahu. Predstavme si nasledujúci kód:

<div class="row text-white">
      <div class="col-xs background-primary">Krátký text</div>
      <div class="col-xs background-secondary">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
        placerat. Nunc tincidunt ante vitae massa. Mauris dolor felis, sagittis
        at, luctus sed, aliquam non, tellus. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Vivamus porttitor turpis ac leo. Aliquam erat volutpat.
        Pellentesque habitant morbi tristique senectus et netus et malesuada
        fames ac turpis egestas. Aliquam ante. Proin pede metus, vulputate nec,
        fermentum fringilla, vehicula vitae, justo. Nemo enim ipsam voluptatem
        quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
        magni dolores eos qui ratione voluptatem sequi nesciunt. Cras pede
        libero, dapibus nec, pretium sit amet, tempor quis.
      </div>
</div>

Kód nám vygeneruje nasledujúcu stránku:

Your page
localhost

Ak teraz jednému zo stĺpcov nastavíme margin, tak stĺpce majú stále spolu šírku 100%. Avšak aj napriek tomu by som to nedoporučoval.

Čo sa ale stane, ak medzi stĺpce s automatickou šírkou pridáme stĺpec s pevnou šírkou? Jednoducho stĺpec s automatickou šírkou vyplní zvyšok riadku. Ak je stĺpcov s automatickou šírkou viac, vyplní zvyšok riadku rovnomerne:

<div class="row text-center text-white">
      <div class="col-xs-6 background-primary">Pevná šířka 1/2</div>
      <div class="col-xs background-secondary">Automat</div>
      <div class="col-xs background-secondary">Automat</div>
      <div class="col-xs background-secondary">Automat</div>
</div>

K HTML pridáme ešte CSS:

.text-center {
  text-align: center;
}

.text-white {
  color: white;
}

.background-primary {
  background-color: red;
}

.background-secondary {
  background-color: green;
}

Výsledok vyzerá takto:

Your page
localhost

Zmena poradia

Ďalšia vec, čo nám Flexbox Grid umožňuje, je meniť poradie elementov. Oproti Bootstrap, kde ide určiť presné miesto elementu, nám Flexbox Grid dovoľuje určiť len prvý a posledný element. Používame k tomu triedy .first-X a .last-X na elemente, kde X určuje jeden z Breakpoint. ukážka:

<div class="row text-white text-center">
      <div class="col-xs last-xs background-primary">První</div>
      <div class="col-xs background-secondary">Druhý</div>
      <div class="col-xs first-xs background-primary">Třetí</div>
      <div class="col-xs background-secondary">Čtvrtý</div>
</div>

HTML kód vyššie nám vygeneruje nasledujúcu stránku:

Your page
localhost

Offsety

Občas nejaký stĺpec nevyužijeme a chceme namiesto neho ponechať voľné miesto. Aby sme sa vyhli jeho zbytočné deklaráciu v kóde, nemusíme prázdny stĺpec vkladať vôbec a nasledujúce stĺpec o kus posunúť. Máme na to k dispozícii triedu vo formáte .col-X-offset-Y, pričom Y je číslo, ktoré definuje počet stĺpcov (Y z 12), o ktorej sa má daný stĺpec posunúť doprava. X je hodnota Breakpoint. ukážka:

<div class="row text-white text-center">
      <div class="col-xs-3 background-primary">První</div>
      <div class="col-xs-3 col-xs-offset-3 background-secondary">Třetí</div>
      <div class="col-xs-3 background-primary">Čtvrtý</div>
</div>

Kód nám vygeneruje nasledujúcu stránku:

Your page
localhost

Pozíciovanie

Flexbox Grid, ako už je vlastne z názvu frameworku spoznať, vychádza z Flexbox rozloženia. Preto využíva niektoré vlastnosti Flexboxu. Tým je napr. Pozicovanie elementov vo voľnom mieste. Môžeme buď pozicový horizontálne, vertikálne a alebo podľa preddefinovaných štýlov. Hlavným rozdielom je, že nasledujúce triedy sa píšu na riadok (.row), né na stĺpec. Definujú totiž správanie celého riadku:)

Horizontálne pozíciovanie

Začnime ukážkou horizontálneho pozicovanie. Používajú sa k tomu triedy .start-X, .center-X, .end-X, kde je X breakpoint. Tieto triedy nám určujú, odkiaľ sa budú elementy pozicový. Či od začiatku, zo stredu alebo z konca. ukážka:

<div class="row start-xs">
      <div class="col-xs-6">Začátek</div>
</div>

<div class="row center-xs">
      <div class="col-xs-6">Střed</div>
</div>

<div class="row end-xs">
      <div class="col-xs-6">Konec</div>
</div>

CSS kód bude:

.row {
  text-align: center;
  background-color: #0e9fe2;
  padding: 10px;
  margin-top: 10px;
}

.col-xs-6 {
  background-color: rgb(10, 32, 153);
  color: white;
}

Výsledok v prehliadači:

Your page
localhost

Každý ďalší vložený stĺpec by sa potom napozicoval na rovnakú stranu.

Vertikálne pozíciovanie

Vertikálne pozíciovanie nám zaisťujú triedy .top-X, .middle-X a .bottom-X, kde X opäť určuje breakpoint. Opäť je priradíme na riadok:

<div class="row top-xs">
    <div class="col-xs-12">Top</div>
</div>

<div class="row middle-xs">
    <div class="col-xs-12">Middle</div>
</div>

<div class="row bottom-xs">
    <div class="col-xs-12">Bottom</div>
</div>

CSS kód bude:

.row {
  text-align: center;
  background-color: #0e9fe2;
  padding: 10px;
  margin-top: 10px;
  height: 100px;
}

.col-xs-12 {
  background-color: rgb(10, 32, 153);
  color: white;
}

Výsledok v prehliadači:

Your page
localhost

Ostatné stĺpce by sa samozrejme vkladali na rovnakú časť riadku.

Preddefinované pozíciovanie

Dnes sa pozrieme už na posledný ukážku. Ide o preddefinované formy, ako sa stĺpce budú pozicový v riadku. Obe samozrejme vychádza z Flexbox, takže ak ho poznáte, určite vám budú povedomé triedy .around-X a .between-X (X zase určuje breakpoint). Tu toho nie je moc čo vysvetľovať, poďme si rovno ukázať, ako vyzerajú. (Triedy opäť píšeme na riadok (.row) - definujeme tým totiž štýl pre celý riadok, nie len určitý stĺpec!):

<div class="row around-xs">
      <div class="col-xs-2">around</div>
      <div class="col-xs-2">around</div>
      <div class="col-xs-2">around</div>
</div>

<div class="row between-xs">
      <div class="col-xs-2">between</div>
      <div class="col-xs-2">between</div>
      <div class="col-xs-2">between</div>
</div>

CSS kód bude:

.row {
  text-align: center;
  background-color: #0e9fe2;
  padding: 10px;
  margin-top: 10px;
}

.col-xs-2 {
  background-color: rgb(10, 32, 153);
  color: white;
}

V prehliadači sa zobrazí:

Your page
localhost

Ako môžeme vidieť, tieto preddefinované štýly používajú interne triedu .middle a potom trochu rozdielne pracujú s miestom okolo seba.

To by bolo pre túto lekciu všetko, dúfam, že sa vám Flexbox Grid páči a budete ho využívať aj na svojom projekte:)

V ďalšej lekcii, Úvod do Bootstrap , sa uvedieme do frameworku Bootstrap a ukážeme si jeho základné princípy.


 

Predchádzajúci článok
Úvod do CSS grid systémov
Všetky články v sekcii
Responzívne webdesign
Preskočiť článok
(neodporúčame)
Úvod do Bootstrap
Článok pre vás napísal Štěpán Zavadil
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
Autor se věnuje tvorbě webových aplikací v JavaScriptu
Aktivity

 

 

Komentáre

Avatar
Gina Jana Dvořáková:27.3.2021 21:34

Moc děkuji za lekci. Krásně a přehledně vysvětleno. Paráda, jen tak dál :-)

 
Odpovedať
27.3.2021 21:34
Avatar
Katka Mlázovská:18.8.2021 15:56

Pěkně zpracované - srozumitelné. Díky. :-)

Odpovedať
18.8.2021 15:56
easy choices => hard life; hard choices => easy life;
Avatar
Jaroslav Drobek:4. apríla 21:26

Hodnocení:

  • "Můžeme rovnou použít i nějaké to CSS" - kam to ale vložíme? K čemu jsou definice selektorů tříd text-center,background-primary,background-secondary, které v index.html nejsou použity? Odkud se vzalo bílé písmo? Co má na svědomí třída row? Kde je má selektor?
  • Jsou v IT nějaká jiná pravidla pro čtení textu? Čte se třeba odzadu? Nebo hvězdicovitě? V hebrejštině je to třeba zprava doleva, tak se ptám..
  • Automatická šířka: .col-X, .row bez teček.
 
Odpovedať
4. apríla 21:26
Avatar
Jaroslav Drobek:4. apríla 21:27

Hodnocení (nevměstnané pokračování):

  • V Lekci 8 kurzu HTML/CSS bylo jasně popsáno, co je název třídy (bez tečky) a co třídní selektor (s tečkou) - tady se to plantá páté přes deváté.
 
Odpovedať
4. apríla 21:27
Avatar
LBelka
Člen
Avatar
LBelka:19. mája 12:12

Tato lekce mi přišla dosti zmatečná, zejména začátek kde si člověk musí tak nějak sám přijít na to kam zapsat CSS kód.

 
Odpovedať
19. mája 12:12
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Odpovedá na LBelka
Lukáš Bartošek :19. mája 15:17

Responzivní webdesign - Online kurz

Pro tento kurz se předpokládá, že budeš už umět základy HTML a CSS.

Základní CSS selektory a vlastnosti

Pro ty co neví kam css kód zapsat.

Odpovedať
19. mája 15:17
Nachystejte uzenáče, na snídani jsem zpátky!
Avatar
LBelka
Člen
Avatar
Odpovedá na Lukáš Bartošek
LBelka:19. mája 15:51

To ano, ale právě v základních tutoriálech nic nebylo o připojení více souborů se styly. Vždy se do této doby pracovalo s jedním lokálním souborem. A teď bez vysvětlení se přejde na kombinaci importovaných a lokálních. Já si poradil, ale to neznamená že nemohlo být lépe v článku vysvětleno aby bylo i bez komplikací pochopeno...

 
Odpovedať
19. mája 15:51
Avatar
Lubor Pešek
Člen
Avatar
Odpovedá na LBelka
Lubor Pešek:13. júna 13:07

Uznávám, že mohlo být zmíněno, že může existovat více připojení css. Já to třeba několikrát viděl v projektech, tak mě to okamžitě napadlo, ale pro úplného nováčka to může být problém.

Odpovedať
13. júna 13:07
Existují dva způsoby, jak vyřešit problém. Za prvé vyhoďte počítač z okna. Za druhé vyhoďte okna z počítače.
Avatar
Stanislav L
Člen
Avatar
Odpovedá na Jaroslav Drobek
Stanislav L:22. júna 22:31

Zdravím,
aj mne chýbalo prepojenie medzi html a css v prvej ukážke, ale nižšie uvedené okná to vysvetľujú. Aby to bolo prepojené chýba tam - doplním medzi ***

<div class="row ***text-center text-white***">
      <div class="col-xs-12 col-md-3 ***background-primary***">Čtvrtina</div>
      <div class="col-xs-12 col-md-3 ***background-primary***">Čtvrtina</div>
      <div class="col-xs-12 col-md-6 ***background-secondary***">Polovina</div>
</div>

.text-center {
  text-align: center;
}

.text-white {
  color: white;
}

.background-primary {
  background-color: red;
}

.background-secondary {
  background-color: green;
}
Editované 22. júna 22:32
 
Odpovedať
22. júna 22:31
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 9 správy z 9.