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äčšíchmd-Y
- element bude širokýY
stĺpcov na stredne veľkých zariadeniach a väčšíchlg-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:
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ť:
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:
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:
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:
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:
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:
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:
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í:
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.