3.2.

Flexbox

Flexible Box Module, koji se obično naziva flexbox, dizajniran je kao jednodimenzionalni
model izgleda i kao metoda koja može ponuditi distribuciju prostora između stavki u interfejsu
i moćne mogućnosti poravnanja. Ovaj članak daje pregled glavnih karakteristika flexboxa, koje
ćemo detaljnije istražiti u ostatku ovih vodiča.
Kada opisujemo flexbox kao jednodimenzionalan, mi opisujemo činjenicu da se flexbox bavi
rasporedom u jednoj po jednoj dimenziji - bilo kao red ili kolona. Ovo se može suprotstaviti
dvodimenzionalnom modelu CSS Grid Layout - a, koji zajedno kontrolira kolone i redove.
Kada radite sa flexboxom morate razmišljati u terminima dvije ose - glavne ose i poprečne ose.
Glavna osa je definirana flex-direction svojstvom, a poprečna osa ide okomito na nju. Sve što
radimo sa flexboxom se odnosi na ove ose, tako da je vrijedno razumjeti kako one rade od
samog početka.
Glavna os je definirana sa flex-direction, koja ima četiri moguće vrijednosti:
• row
• row-reverse
• column
• column-reverse

Ako se odabere row ili row-reverse, glavna osa će se prostirati duž reda u inline smijeru.

Slika 3.2.1. Glavna osa flexboxa u inline smijeru

Odaberite column ili column-reverse, glavna os će se kretati od vrha stranice do dna - u smijeru
bloka.

Slika 3.2.2. Glavna osa u block smijeru

16
Poprečna osa ide okomito na glavnu osu, stoga ako je svojstvo flex-direction (glavna osa)
postavljeno na row ili row-reverse poprečna os ide duž kolona.

Slika 3.2.3. Poprečna osa flexboxa duž kolona

Ako je vaša glavna osa column ili column-reverse tada poprečna osa ide duž redova.

Slika 3.2.4. Poprečna osa flexboxa duž redova

Flex kontejner

Područje dokumenta postavljeno pomoću flexboxa naziva se flex kontejner. Za kreiranje

fleksibilnog kontejnera, vrijednost displaysvojstva kontejnera područja postavljamo na flexili
inline-flex. Čim to učinimo, direktna djeca tog kontejnera postaju flex stavke. Kao i kod svih
svojstava u CSS-u, neke početne vrijednosti su definirane, tako da će se prilikom kreiranja flex
kontejnera sve sadržane flex stavke ponašati na sljedeći način:
• Stavke se prikazuju u redu (flex-directionzadana vrijednost svojstva je row).
• Stavke počinju od početne ivice glavne ose.
• Stavke se ne rastežu na glavnoj dimenziji, ali se mogu skupiti.
• Stavke će se rastegnuti kako bi ispunile veličinu poprečne ose.
• Nekretnina flex-basisje postavljena na auto.
• Nekretnina flex-wrapje postavljena na nowrap.
Rezultat ovoga je da će se sve vaše stavke poredati u red, koristeći veličinu sadržaja kao njihovu
veličinu u glavnoj osi. Ako ima više predmeta nego što može stati u kontejner, oni se neće
omotati, već će se preliti. Ako su neki predmeti viši od drugih, svi predmeti će se protezati duž
poprečne ose kako bi ispunili svoju punu veličinu.

17
4. Primjer web stranice

Kao primjer web stranice sa gridom i flexboxom urađena je stranica za vijesti čiji je izgled
prikazan na slici 4.1.

Slika 4.1. Primjer web stranice sa gridom i flexboxom

Sa slike 4.1. se jasno vidi izgled grida. Budući da je ukupan kod za ovu stranicu poprilično
velik, u nastavku će biti prikazani i objašnjeni neki glavni dijelovi CSS koda stranice.
Glavni fokus će biti na same članke (articles) čiji izgled ima jasne karakteristike grida.

18
 Slika 4.2. Relevantni HTML kod

Slika 4.3. CSS glavnog kontejnera za članke

Na slici 4.3. je prikazan CSS kod div elementa sa klasom articles-container, čiji parent
(„roditelj“) element ima id home-articles. Ukratko, to je div u koji su smješteni svi članci
na stranici.
Postavlja se display atribut kontejnera na grid, zatim se definiše kako će on izgledati.
Linijom koda 274 sa slike 4.3. se pravi grid koji ima 3 kolone jednakih veličina (svaka po
1 dio stranice, od ukupno tri jednaka dijela). grid-gap: 1rem; „govori“ stranici da ostavi
prostor između elemenata u gridu od 1rem.
Rezultat ovoga se vidi na slici 4.1., gdje su članci jasno podijeljeni u tri kolone.

19
 Slika 4.4. CSS kod za prvi i zadnji članak

Na slici 4.1. se vidi da prvi i zadnji članak su drugačiji od ostalih, prostiru se na dvije kolone
grida. Kod prikazan na slici 4.4. je odgovoran za stilizovanje ta dva članka.
Selektori na linijama 278 i 279 sa slike 4.4. označavaju prvi i zadnji članak. Display
svojstvo se postavlja na grid, grid se sastoji od dvije jednake kolone koje su razmaknute za
1red. align-items: center; centriše sve stavke u datom elementu.
Svaka kolona grida ima dvije linije, početna i krajnja linija. Krajnja linija prve kolone je
početna linija druge kolone, tako da grid sa tri kolone ima 4 linije. Prva kolona je od prve
do druge linije, druga kolona od druge do treće linije i četvrta kolona od treće do četvrte
linije. Konačno grid-column: 1 / 3; „govori“ elementu da se prostire od prve linije grida do
treće linije grida. Odnosno, ova linija koda „govori“ elementu da zauzme prve dvije kolone
grida na kojem se nalazi. Linijom 287 sa slike 4.4. se označava samo zadnji članak i linija
288 „govori“ zadnjem članku da se prostire od druge do četvrte linije, odnosno da zauzme
drugu i treću kolonu grida.

20
5. Zaključak

Ovaj rad je obradio temu CSS grida i flexboxa. Jasno je da su ovo veoma moćni alati koji su
lagani za koristiti, a daju nevjerojatne rezultate. Koristeći grid i flexbox, uz samo nekoliko
linija koda se može napraviti web stranica koja izgleda fenomenalno. Grid i flexbox lagano
rješavaju neke probleme koji su prethodno bili gotovo nemogući. Oni omogućavaju tačno
dijeljenje nekog kontejnera (elementa, bio to div ili neki drugi) i pozicioniranje elemenata
unutar njega. Bez ova dva moćna alata, pravljenje stranice prikazane u dijelu 4 ovog rada bilo
bi, u najmanju ruku, veoma iscrpljujuće. CSS je prešao velik put od svojih početaka do danas,
i jasno je zašto je jedan od osnova svake web stranice. Danas i najveće stranice koriste upravo
grid i flexbox. Ako se malo obrati pažnja, lako se primjećuju karakteristike grida, a između
ostalog, moguće je uvijek koristiti Grid Ispector. Naravno, CSS je beskoristan bez HTML-a,
jer CSS uzima HTML elemente i stilizira ih. Ali, moglo bi se reći i da je obrnuto tačno, da je
HTML beskoristan bez CSS-a. Niko ne bi želio koristiti web stranicu koja ružno izgleda, ma
koliko funkcionalna ona bila. CSS uvodi život u stranicu i čini je ugodnu, ne samo vizuelno,
nego i funkcionalno ugodnu za koristiti.

21
6. Literatura

[1] https://en.wikipedia.org/wiki/HTML
[2] https://developer.mozilla.org/en-US/docs/Web/HTML
[3] https://en.wikipedia.org/wiki/CSS
[4] https://developer.mozilla.org/en-US/docs/Web/CSS
[5] https://css-tricks.com/snippets/css/complete-guide-grid/
[6] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
[7] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/
Basic_Concepts_of_Grid_Layout
[8] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/
Basic_Concepts_of_Flexbox

22
 Mišljenje mentora o radu
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________

Predložena ocjena: ________________ (__)

Ispitivač: ______________________________

Članovi komisije:
1. _______________________________

2. _______________________________

Izdvojeno mišljenje:
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________

Datum odbrane: ___. ___. ______.

23