PROGRAMIRANJE ZA INTERNET Upute za laboratorijske vježbe (izradio: Marin Bugarić, Frano Rezo)

Flexbox i CSS grid

Lab. vježba

5

P R O G R A M I R A N J E Z A I N T E R N E T

1

Flexbox Flexbox je razvijen s ciljem olakšavanja rada s izradom korisničkih sučelja pomoću CSS-a. Omogućava jednostavnije pozicioniranje, poravnavanje, razdiobu prostora između stavki u nekom kontejneru, čak i ako su dimenzije pojedine stavke nepoznate ili dinamične. Flexbox omogućava roditeljskom kontejneru da promijeni dimenzije i redoslijed direktnih stavki (direct child items) koje se nalaze unutar njega s ciljem dobrog iskorištavanja dostupnog prostora.

Slika 1. Flexbox struktura

Kontejner (eng. container) je element u kojem se nalaze određene stavke. U terminologiji flex-a naziva se: flex kontejner (eng. flex container). Bilo koji HTML element se pretvara u flex kontejner korištenjem CSS deklaracije:

display: flex;

Primjer:

#flex-kutija { display: flex; /* ili inline-flex */ }

Iz ovog primjera, sva direktna „djeca“ flex kontejnera koji ima id „flex-kontejner“, postaju stavke koje se u flex terminologiji nazivaju flex items. Ilustracija kontejnera i njegovih stavki u flex-u je prikazana na slici 1.

F L E X B O X

K O N T E J N E R I

S T A V K E

2

Svojstva flex kontejnera su opisana u nastavku:

• display – prethodno opisano svojstvo koje definira da je neki HTML element flex kontejner. Također, definira svim direktnim „dijete“ HTML elementima flex kontejnera da poštuju zadana svojstva flex kontejnera.

Primjer:

#flex-kutija { display: flex; }

Moguće vrijednosti:

o flex o inline-flex

• flex-direction – definira u kojem smjeru će se slagati stavke flex kontejnera, da li s lijeva na desno u smjeru glavne osi (row - default) ili od gore prema dole u smjeru sporedne osi (column). Ovisno o vrijednosti flex-direction svojstva, mijenjaju se orijentacije glavne i sporedne osi. Primjer:

#flex-kutija { display: flex; flex-direction: column; }

Moguće vrijednosti:

o row (default) o row-reverse o column o column-reverse

• justify-content – poravnava stavke flex kontejnera po glavnoj osi ukoliko

postoji preostali nepopunjeni prostor. Primjer:

#flex-kutija { display: flex; justify-content: flex-end; }

Moguće vrijednosti:

o flex-start (default) o flex-end o center o space-between o space-around o space-evenly

S V O J S T V A

K O N T E J N E R A

3

• align-items – poravnava stavke flex kontejnera po sporednoj osi. Može se

zamisliti kao justify-content, ali samo za sporednu os.

Primjer:

#flex-kutija { display: flex; align-items: center; } Moguće vrijednosti:

o flex-start o flex-end o center o baseline o stretch (default)

• flex-wrap – definira da li će se stavke flex kontejnera prebaciti u novi red ako ne mogu sve stati u jedan red. Po default-u sve stavke će se probati zbiti u jedan red. Primjer:

#flex-kutija { display: flex; flex-wrap: wrap; }

Moguće vrijednosti:

o nowrap (default) o wrap o wrap-reverse

• flex-flow – skraćeni način za zapisivanje svojstava flex-direction i flex-wrap u jednoj liniji kôda. Default vrijednost je: flex-flow: row nowrap; Primjer:

#flex-kutija { display: flex; flex-flow: column wrap; }

4

• align-content – definira kako će se poravnavati linije stavki u flex kontejneru ako postoji višak slobodnog prostora u smjeru sporedne osi. Napomena: Ovo svojstvo nema učinka ako postoji samo jedna linija stavki.

Primjer:

#flex-kutija { display: flex; align-content: space-between; } Moguće vrijednosti:

o flex-start o flex-end o center o space-between o space-around o stretch (default)

Svojstva flex stavki, odnosno flex items-a su definirana u nastavku: Napomena: Podrazumijeva se da je prethodno definiran flex kontejner s:

#kontejner { display: flex; }

• order – konrolira redoslijed u kojem će se stavke prikazivati u flex kontejneru. Po default-u se pojavljaju onako kako su zapisani u HTML-u jer svi imaju početnu vrijednost 0. Novi redoslijed je moguće definirati pozitivnim ili negativnim vrijednostima.

Primjer:

#kontejner > #stavka { order: 2; } Moguće vrijednosti:

o 0 (default) o …, -1, 0, 1, 2, …

S V O J S T V A

S T A V K I

5

• flex-grow i flex-shrink – definira sposobnost elementa da se proširi, ukoliko je potrebno. Kao vrijednost stavlja se obični, nenegativan broj, koji služi kao proporcija (definira udio dostupnog prostora kojeg bi stavka trebala zauzeti). Ako je flex-grow:1; za sve stavke unutar kontejnera tada će sve biti jednakih dimenzija. Ali ako jednoj stavci stavimo flex-grow:2; tada će ta stavka zauzimati dvostruko više mjesta od ostalih. Ako stavimo flex-grow:0; tada se dimenzije stavke neće mijenjati. Analogno flex-grow svojstvu, postoji i flex-shrink svojstvo koje govori kako bi se element trebao smanjivati.

Primjer:

#kontejner > .stavke { flex-grow: 1; } #kontejner > #stavka { flex-grow: 2; }

Moguće vrijednosti (flex-grow):

o 0 (default) o 0, 1, 2, 3, …

Moguće vrijednosti (flex-shrink):

o 1 (default) o 1, 2, 3, …

• flex-basis – definira default-ne dimenzije elementa prije nego se ostatak slobodnog prostora razdijeli (ako je flex-direction kontejnera row, onda specificira širinu stavke, a ako je column, onda visinu).

Primjer:

#kontejner > .stavke { flex-basis: 100%; }

Moguće vrijednosti:

o auto (default) o 0, 1, 2, … ( %, px, em, rem,…)

• flex – skraćeni oblik zapisa u jednoj liniji kôda za sljedeća svojstva:

flex-grow, flex-shrink i flex-basis. Drugi i treći parametar nisu obavezni. Napomena: Ovakav način se preporučuje za korištenje umjesto pisanja deklaracija za sva 3 svojstva posebno.

Primjer:

#kontejner > #stavka { /* flex-grow i flex-shrink su 1, flex-basis je 100% */

flex: 1 100%; }

Moguće vrijednosti:

o 0 1 auto (default) o none o (pogledati prethodna 3 svojstva)

6

• align-self – omogućava „nadjačavanje“ (eng. overridding) predefiniranog poravnavanja (ili onog koje je definirano u flex kontejneru s align-items) za pojedinu stavku. Tako npr. ako imamo sve stavke unutar flex kontejnera vertikalno pomaknute prema gore, a jednu (ili više) od njih želimo vertikalno pozicionirati prema dolje, tada ćemo na tu stavku koristiti align-self svojstvo. Koriste se iste vrijednosti kao i za align-items, a ne može se se isti učinak dobiti koristeći svojstva kao što su: float, clear i vertical-align.

Primjer:

#kontejner { display: flex; align-items: flex-start; } #kontejner > #stavka { align-self: flex-end; } Moguće vrijednosti:

o ovisno o flex kontejneru (default) o (pogledati align-items svojstvo)

Više informacija o Flexbox-u možete pronaći na sljedećim linkovima:

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/ • http://philipwalton.github.io/solved-byflexbox/demos/holy-grail/ • http://www.sketchingwithcss.com/samplechapter/cheatsheet.html

7

CSS grid CSS grid je razvijen iz sličnih razloga kao i Flexbox, radi lakše izrade korisničkih sučelja. CSS grid također omogućava jednostavnije pozicioniranje, poravnavanje, razdiobu prostora između stavki u nekom kontejneru za pozicioniranje i dimenzioniranje. Razlika CSS grid-a u odnosu na Flexbox je ta što je CSS grid fokusiran na dvodimenzionalna sučelja, a Flexbox na jednodimenzionalna sučelja, zbog čega ova dva načina zapravo zajedno funkcioniraju jako dobro. CSS grid-a također postoji terminologija slična kao i kod Flexbox-a, pa tako valja poznavati sljedeće pojmove:

• Grid kontejner (eng. container) – HTML element na koji se primjenjuje svojstvo: display: grid; i predstavlja kontejner koji je „roditelj“ (eng. parent) svim grid stavkama.

Primjer (HTML): <div id="grid-kontejner">

<div class="stavka"></div> <div class="stavka"></div> ... </div>

Primjer (CSS): #grid-kontejner { display: grid; /* ili inline-grid */ }

• Grid stavka (eng. item) – svi HTML elementi koji su direktno „dijete“ (eng. child elements) grid kontejnera. Poštuju sva pravila definirana u grid kontejneru.

• Grid linija (eng. line) – skup linija čine strukturu („mrežu“) grid-a. Služe za lakšu podjelu grid-a na manje dijelove, a mogu biti linije stupaca (eng. column lines) i linije redaka (eng. row lines).

• Grid staza (eng. track) – prostor između dviju

susjednih linija. Možemo ih zamisliti kao stupce ili redove grid-a.

• Grid ćelija (eng. cell) – prostor između dviju susjednih linija stupaca i dviju sustjednih linija redaka. Predstavlja osnovnu „jedinicu“ grid-a.

• Grid područje (eng. area) – ukupan prostor okružen s četiri (4) grid linije. Može se sastojati od bilo kojeg broja grid ćelija.

C S S G R I D

T E R M I N O L O G I J A

8

Svojstva grid kontejnera su opisana u nastavku:

• display – prethodno prikazano svojstvo u primjeru za grid kontejner, definira da je neki HTML element zapravo grid kontejner i na taj način omogućava korištenje grid konteksta za njegov sadržaj, odnosno za njegovu „djecu“.

Primjer:

#grid-kontejner { display: grid; }

Moguće vrijednosti:

o grid o inline-grid

• grid-template-columns i grid-template-rows – definiraju stupce i retke grid-a pomoću popisa vrijednosti koje su odvojene razmakom. Te vrijednosti definiraju širinu grid staze.

Primjer:

#grid-kontejner { display: grid; grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto; }

Rezultat:

Moguće vrijednosti:

o px, %, … o fr – preostali nepopunjeni prostor (eng. fraction):

npr. grid-template-columns: 1fr 1fr 1fr; - 3 stupca jednake širine o repeat(broj, veličina [naziv_linije]) – ponavlja određeni broj puta grid

staze definirane veličine do određene linije (opcionalno): npr. grid-template-columns: repeat(3, 20px [col-start]);

S V O J S T V A

K O N T E J N E R A

9

• grid-template-areas – definira strukturu grid-a koristeći imena područja koja su definirana unutar grid-area svojstava (pogledati svojstva stavki).

• grid-template – skraćeni način zapisa u jednoj liniji za sljedeća 3 svojstva grid kontejnera: grid-template-rows, grid-template-columns i grid-template-areas.

• grid-column-gap i grid-row-gap – definira širinu grid linija. Zapravo se može definirati i kao prostor između susjednih stupaca i susjednih redaka, ali ne kao prostor prema vanjskim rubovima. Treba napomenuti kako će se u budućnosti iz ovih naziva ukloniti prefiks "grid-" i da će biti row-gap i column-gap svojstva.

Primjer:

#grid-kontejner { display: flex; grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; grid-column-gap: 10px; grid-row-gap: 15px; }

Rezultat:

• grid-gap – skraćeni način zapisa u jednoj liniji za prethodno opisana 2

svojstva: grid-row-gap i grid-column-gap i to redoslijedom: grid-gap: <grid-row-gap> <grid-column-gap>;

Definira se s dvije vrijednosti odvojene razmakom, a ukoliko postoji jedna vrijednost, tada se ona primjenjuje na oba svojstva. Također vrijedi da će se u budućnosti koristiti naziv gap, bez "grid-" prefiksa.

Primjer:

#grid-kontejner { display: flex;

grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px;

grid-gap: 15px 10px; /* isti rezultat kao u prethodnom primjeru */ }

10

• Ostala svojstva grid kontejnera:

o justify-items o align-items o place-items o justify-conent o align-content o place-content o grid-auto-columns i grid-auto-rows o grid-auto-flow o grid

Svojstva grid stavki su definirana u nastavku. Napomena: Smatra se da je prethodno definiran grid kontejner sa svojstvom:

#kontejner { display: grid; }

• grid-column-start, grid-column-end i grid-row-start, grid-row-end – određuje lokaciju stavke unutar grid-a na način da se definira od koje linije grid-a stavke počinje i do koje linije završava. Svojstva s nastavkom "-start" definiraju početnu liniju od koje počinje stavka, a svojstva s nastavkom "-end" određuju do koje linije će se stavka proširiti.

Primjer:

#kontejner > .item-b { grid-column-start: 1; grid-column-end: span col4-start; grid-row-start: 2; grid-row-end: span 2; }

Rezultat:

S V O J S T V A

S T A V K I

11

Moguće vrijednosti:

o broj ili naziv-linije: npr. grid-column-start: 1; ili grid-row-start: start-line;

o span broj-linije – span označava kroz koliko idućih linija će se stavka proširiti: npr. grid-row-end: span 2;

o span naziv-linije: npr. grid-column-end: span col4-start;

o auto o ako se ne specificira grid-row-end ili grid-column-end, tada se za njih

smatra kao da imaju default vrijednosti: span 1

• grid-column i grid-row – skraćeni zapis za prethodna 4 svojstva i to redoslijedom: grid-column: <grid-column-start> / <grid-column-end>; grid-row: <grid-row-start> / <grid-row-end>;

Moguće je koristiti vrijednosti kao i kod prethodnog primjera, ali je važno odvojiti "-start" i "-end" dio s kosom crtom (" / ").

Primjer:

#kontejner > .item-c { grid-column: 3 / span 2; grid-row: third-line / 4; }

Rezultat:

• grid-area – koristi se za dodjeljivanje imena stavkama, tako da se ta imena

mogu koristiti ko grid-template-areas svojstva za lakše strukturiranje. Također, moguće ga je koristiti za još jednostavniji zapis područja stavke u jednoj liniji koda prema primjeru: grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;

12

Primjer:

#kontejner > .item-d { grid-area: 1 / col4-start / last-line / 6;

} #kontejner > .item-d {

grid-area: blue-aside; /* Dodjeljivanje proizvoljnog imena */ }

Rezultat:

• Ostala svojstva grid stavki:

o justify-self o align-self o place-self

Više informacija o CSS grid-u možete pronaći na sljedećim linkovima:

• https://css-tricks.com/snippets/css/complete-guide-grid/ • http://cssgridgarden.com/ • https://learncssgrid.com/

13

Zadatak Pripremiti radni direktorij/mapu za vježbu 5 kao i u prethodnim vježbama. Nakon preuzetih resursa, nastaviti kroz sljedeće zadatke: (Napomena: Pri čitanju zadataka pratiti sliku na posljednjoj stranici)

Primjena Flexbox-a: 1. Primijeniti Flexbox CSS svojstva na <header> dio, gdje će <header> biti kontejner, a njegova "djeca"

stavke unutar kontejnera. Primijetite koji još element treba biti kontejner da bi se dobio rezultat kao na slici ispod.

2. Apsolutno pozicionirani tekst preko slike poravnati vertikalno po sredini (kao na slici ispod) koristeći Flexbox CSS svojstva.

14

3. Listu pizza s njihovim podacima već imamo poredane jedne pokraj drugih kao na slici ispod. Pokušajte dobiti isti rezultat koristeći Flexbox CSS svojstva (bez korištenja: display: inline-block;).

Primjena CSS Grid-a: 1. Primijeniti CSS Grid svojstva na <table> element unutar "cjenik" <section> dijela. Postaviti <table>

element i sve <tr> elemente da budu "grid" kontejneri, a njihove stavke stilizirati tako da se dobije struktura kao na slici ispod.

15

Bonus zadatak: Stilizirati kontakt formu kao na slici ispod. Uz korištenje dosad naučenih CSS svojstava, također koristiti ili Flexbox ili CSS Grid (ili kombinacija tih dvaju) svojstva za prikaz i strukturiranje elemenata.

16