Uvod u web dizajn - 4. deo - Tagovi div i span - Flex box

Uvod

Pošto smo se upoznali sa osnovnim HTML tagovima i osnovama CSS-a, na red sasvim prirodno dolazi diskusija o opštoj strukturi web stranica, to jest: potrebno je da se upoznamo sa 'tehnikalijama' koje omogućavaju pravilan raspored elemenata stranice.

Pri projektovanju sajtova svakako treba najviše pažnje treba posvetiti pravilnom rasporedu elemenata, ali (budimo iskreni), ni u kom slučaju 'ne šteti' ni to da stranice izgledaju lepo, i stoga ćemo usput prodiskutovati i o tome kako pravilno definisana HTML struktura utiče na opštu estetiku web stranica.

Dopadljivost se dodatno postiže i upotrebom adekvatnih boja, oblika i veličina slova (kao i slika i drugih elemenata), međutim, za početak je potrebno da se upoznamo i sa nekolicinom novih tagova (od kojih se jedan koristi za definisanje podele) ....

Div - Generički blok kontejner

Ako malo bolje razmislimo, neće biti teško da dođemo do zaključka da tagovi sa kojima smo se do sada upoznali, nisu (zapravo) u stanju da omoguće podelu stranica.

HTML specifikacija predviđa da se preko <a> tagova definišu linkovi prema spoljnjim stranicama, preko <img> tagova slike, preko <p> tagova pasusi, međutim, u pitanju su tagovi sa konkretnom namenom - i nijedan od njih nije pogodan za definisanje opšte strukture web stranica (a isti je slučaj i sa drugim tagovima sa kojima smo se do sada upoznali).

Pored navedenih tagova (i ostalih tagova specifične namene), postoje i takozvani "generički kontejneri", tagovi <div> i <span> - nespecijalizovani tagovi opšte namene, pogodni za smeštaj drugih HTML elemenata.

Definicija

U okviru jezika HTML, tag <div> (eng. division - "podela"), predstavlja generički (tj. opšti) blok element, koji sam po sebi nema pojavni oblik (grafički sadržaj, dimenzije i sl), ali, pogodan je za definisanje (odnosno, 'uokviravanje') nezavisnih odeljaka HTML strukture - i može se stilizovati preko CSS-a.

Na primer, preko taga <div>, sav HTML kod koji je vezan za navigacionu traku sa linkovima, može se smestiti u jedan pregledan odeljak (i potom se svi elementi mogu povezati sa CSS-om i sl).

		
<div id='nav_traka'>
	<a href='./'>Početna</a>
	<a href='./blog.html'>Blog</a>
	<a href='./kontakt.html'>Kontakt</a>
</div>

Slika 1. - HTML struktura navigacione trake, uokvirena div tagovima.

Uloga div elemenata u podeli stranica

Ukoliko unutar <body> tagova (dok HTML datoteka još nije povezana sa CSS-om), samo definišemo tri <div> odeljka ("i ne uradimo ništa drugo") - nećemo učiniti mnogo toga po pitanju prostorne podele.

Međutim, ako svemu dodamo i CSS, moći ćemo da rasporedimo (u vizuelnom smislu), tri elementa jedan ispod drugog, ili jedan pored drugog, pri čemu podela može biti ravnomerna (ili u proizvoljnim proporcijama), a određenim elemenatima može se zadati i fiksna visina (ili širina, u zavisnosti od pravca raspoređivanja), tako da ostali elementi ravnomerno popune preostali prostor.

Upravo smo opisali način za podelu stranica sa kojim se posetioci sajtova susreću svakodnevno, i čitaoci mogu naslutiti da takav način raspodele nije komplikovan (niti treba da bude).

Na stranici koja sadrži tekst koji trenutno čitate, navigaciona traka nalazi se u zasebnom <div> kontejneru, koji je dodatno podeljen na odeljke sa linkovima i drugim sadržajima (isto važi i footer), sam tekst članka je u zasebnom <div> odeljku, a postoji još i nekoliko drugih odeljaka - i sve to čini stranicu pregledn(ij)om.

Pošto smo stekli okvirnu predstavu o ulozi <div> elemenata u podeli stranica, možemo započeti sa proučavanjem tehnika za podelu stranice, ali, osvrnimo se pre toga i na generički inline element - <span>.

Span - Generički inline kontejner

Tag <span> (eng. span - "raspon"), predstavlja generički kontejner linijskog tipa (tj 'inline element'), koji takođe sam po sebi nema pojavni oblik, ali, može se stilizovati preko CSS-a (baš kao i <div> kontejner).

		
Tekst obojen u <span style='color: #ff4444;'>crveno</span>.

Slika 2. - Tag span, preko koga su definisana svojstva označenog dela teksta.

Za razliku od <div> elemenata, <span> elementi ne igraju ulogu u definisanju opšte strukture HTML dokumenta (niti im je to namena), međutim, sasvim dobro dođu kada je potrebno sporadično stilizovati delove pasusa (obojiti pojedinačne reči zarad efekta i sl).

Podela stranice - osnovna HTML struktura

Da bismo se što bolje upoznali sa tehnikama za podelu stranice, koristićemo jednostavan primer kakav smo već nagovestili: posmatraćemo kako možemo deliti stranicu po horizontali i vertikali, preko tri <div> elementa.

Okvir stranice

U web dizajnu (zarad preglednosti), celokupan sadržaj stranice tipično se smešta u zaseban <div> kontejner kome se pripisuje prigodan id (najčešće "wrapper", ali, za ovaj školski primer koristićemo id "okvir").

Odmah na početku, pre nego što se definišu ostali elementi strukture (i pre unosa sadržaja), dodaćemo prazan <div>.

		
<!DOCTYPE html>

<html>
	<head>
	</head>

	<body>
		<div id='okvir'>
		</div>
	</body>
</html>

Slika 3. - 'Nosač sadržaja stranice', koji je definisan preko taga <div> (sa id-om "okvir").

Ako otvorimo praznu stranicu u browseru - nećemo videti ništa (osim bele pozadine), i stoga je potrebno: ili kreirati sadržaj stranice, ili definisati stil.

Ovoga puta definisaćemo stil.

		
* {
	margin:  0;
	padding: 0;
}

#okvir {
	width:      100vw;
	height:     100vh;
	background: #0099ee;
}

Slika 4. - CSS kod preko koga će div element sa slike #3 poprimiti vidljiva svojstva, tj. proširiti se preko cele stranice i dobiti boju (a preko univerzalnog selektora "*", uklanjaju se margine i padding sa svih elemenata).

Boja koju smo koristili, neće na kraju ostati, već predstavlja svojevrstan mehanizam provere ("za svaki slučaj").

Jedinice koje smo koristili za zadavanje visine i širine, nisu procenti (relativne jedinice koje nas mogu često i "prevariti"), već jedinice vw (viewport width) i vh (viewport height), koje su vezane za dimenzije ekrana (tj. "viewport-a"), i definisane su na sledeći način:

1vw = 1% širine ekrana
1vh = 1% visine ekrana

Unutrašnji div elementi

Shodno 'propozicijama' koje smo ranije naveli, stranicu ćemo nadalje podeliti na tri dela ....

		
<body>
	<div id='okvir'>
		<div id='div_01'>
		</div>

		<div id='div_02'>
		</div>

		<div id='div_03'>
		</div>
	</div>
</body>

Slika 5. - Dopunjena HTML struktura (unutar elementa sa id-om "okvir", nalaze se tri div elementa).

.... ali, naravno, generički <div> elementi nemaju (bez CSS-a), vidljive odlike koje signaliziraju da podela postoji.

HTML struktura primera je sada kompletna.

Za dalje definisanje (vizuelne) podele, koristićemo flexbox - moderan, popularan i veoma funkcionalan način za raspoređivanje elemenata stranice (preko CSS-a).

Flex box - osnove

U CSS-u, termin "Flex box" predstavlja skup tehnika (to jest, modul), koji omogućava vizuelno pozicioniranje, poravnanje i distribuiranje elemenata, što se praktično može iskoristiti za vizuelnu podelu, pre svega stranica, ali naravno i pojedinačnih elemenata.

Unutar tzv. flex kontejnera, unutrašnji elementi mogu se raspoređivati ravnomerno ili u nekim drugim proporcijama (shodno raspoloživim dimenzijama nosećih okvira), i takođe se mogu automatski centrirati ili pozicionirati na neki drugi način (horizontalno ili vertikalno).

Osnovne odlike

Glavna odlika flexbox-a je automatsko širenje i skupljanje shodno raspoloživom prostoru (sama reč "flex" na engleskom jeziku označava upravo širenje i skupljanje), ali, svakako je i "fleksibilnost" (u smislu prilagodljivosti), takođe jedna od važnijih odlika flexbox-a.

Uz sve navedeno, određenim elementima moguće je zadati i fiksne dimenzije (da budemo precizni - jednu od dve dimenzije), što dodatno olakšava posao web dizajnera.

Kreiranje flex kontejnera

Raspoređivanje elemenata preko modela Flex box, funkcioniše tako što određeni HTML element (tipično <div>), preuzima ulogu flex kontejnera (tj. okvira/nosača), što potom omogućava razmeštaj unutrašnjih elemenata po ranije navedenim pravilima.

U primeru koji koristimo, <div> element kome smo prethodno pripisali id "okvir", postaće flex kontejner;

		
#okvir {
	display:         flex;
	flex-direction:  column;
	justify-content: flex-start;
	align-items:     stretch;

	width:           100vw;
	height:          100vh;
	background:      #0099ee;
}

Slika 6. - Definisanje flex kontejnera: preko parametra display, element se praktično 'proglašava' za flex kontejner, a naredna tri parametra, određuju konkretne odlike flex kontejnera.

Izgled i ponašanje nosećeg elementa definisani su preko: svojstva display (koje ima vrednost "flex"), i parametara flex-direction, justify-content i align-items, koji bliže određuju svojstva flex kontejnera (sledi objašnjenje).

Svojstvo display

Sa atributom display susreli smo se u prethodnom članku, kada je bilo potrebno definisati fizičke dimenzije dugmeta koje predstavlja link, što, bez dodatnih intervencija - nismo mogli da uradimo, budući da su <a> tagovi linijski elementi (i stoga smo za atribut display koristili vrednost block).

Vrednost flex koju smo naveli u prethodnom odeljku, takođe definiše blok elemente (u idejnom smislu), * a u najosnovnijem tehničkom smislu, zarad definisanja flex kontejnera dovoljno je napisati ....

		
#okvir {
	display: flex;
}

Slika 7. - Element sa id-om "okvir", proglašen je za flex kontejner.

.... međutim, ovakav flex kontejner (iako tehnički ispravan), najverovatnije se neće ponašati onako kako smo zamislili (osim ako se naša zamisao ne poklapa sa podrazumevanim vrednostima svih parametara flex modela), što praktično znači da je potrebno podesiti i ostale atribute ....

Svojstvo flex-direction

Svojstvo flex-direction određuje pravac i smer raspoređivanja elemenata, uz sledeće moguće vrednosti:

		
#okvir {
	flex-direction: row;
	flex-direction: column;
	flex-direction: row-reverse;
	flex-direction: column-reverse;
}

Slika 8. - Parametar flex-direction - moguće vrednosti.

row - raspoređivanje elemenata sleva nadesno (elementi su jedni pored drugih)

Slika 9. - flex-direction: row; - elementi se raspoređuju jedan pored drugog, redom koji je naveden u HTML dokumentu.
column - raspoređivanje elemenata odozgo nadole (elementi su jedni ispod drugih)

Slika 10. - flex-direction: column; - elementi se raspoređuju jedan ispod drugog, redom koji je naveden u HTML dokumentu.
reverse-row - raspoređivanje zdesna nalevo

Slika 11. - flex-direction: reverse-row; - elementi se raspoređuju jedan pored drugog, suprotno od redosleda koji je naveden u HTML dokumentu.
reverse-column - raspoređivanje odozdo nagore

Slika 12. - flex-direction: reverse-column; - elementi se raspoređuju jedan ispod drugog, suprotno od redosleda koji je naveden u HTML dokumentu.

Ako se koriste opcije row i column, elementi se ređaju shodno rasporedu koji je (praktično) naveden u HTML-u, dok opcije reverse-row i reverse-column (kao što nazivi sugerišu), obrću redosled.

Svojstvo justify-content

Pošto je izabrana glavna osa po kojoj će se elementi raspoređivati (horizontalna ili vertikalna), preko svojstva justify-content može se definisati poravnanje elemenata u odnosu na glavnu osu.

U primeru koji razmatramo, glavno poravnanje obavlja se po horizontalnoj osi (flex-direction: row;), uz sledeće moguće vrednosti atributa justify-content:

		
#okvir {
	justify-content: flex-start;
	justify-content: flex-end;
	justify-content: center;
	justify-content: space-around;
	justify-content: space-between;
	justify-content: space-evenly;
}

Slika 13. - Svojstvo justify-content - moguće vrednosti.

flex-start - poravnanje elemenata u odnosu na početak

Slika 14. - justify-content: flex-start; - elementi se raspoređuju tako da se ravnaju u odnosu na početak.
flex-end - poravnanje elemenata u odnosu na kraj

Slika 15. - justify-content: flex-end; - elementi se raspoređuju tako da se ravnaju prema kraju.
center - centralno poravnanje

Slika 16. - justify-content: center; - elementi se raspoređuju tako da su centrirani.
space-around - automatsko poravnanje koje svakom elementu dodeljuje jednake 'margine', * sa obe strane (pri čemu je prostor između dva susedna elementa, očigledno, veći od prostora između ivice i prvog elementa, ili, poslednjeg elementa i suprotne ivice)

Slika 17. - justify-content: space-around; - elementi se raspoređuju tako da su "margine" koje su dodeljene svakom elementu - identične.

space-evenly - poravnanje u kome je međuprostor između dva susedna elementa, isti kao i prostor između prvog i poslednjeg elementa i odgovarajućih ivica

Slika 18. - justify-content: space_evenly; - elementi se raspoređuju tako da su svi međuprostori identični.
space-between - prvi i poslednji element su poravnati sa ivicama, a svi ostali međuprostori su identični

Slika 19. - justify-content: space-between; - elementi se raspoređuju tako da su prvi i poslednji element naslonjeni na ivice, dok su svi ostali međuprostori, ravnomerno podeljeni.

Svojstvo align-items

Svojstvo align-items određuje poravnanje elemenata u odnosu na 'preostalu osu'.

Da pojasnimo: ako pretpostavimo da je za atribut flex-direction izabrana opcija row, osnovno raspoređivanje se obavlja po horizontalnoj osi (što se podešava preko atributa justify-content), i stoga atribut align-items praktično definiše poravnanje po vertikalnoj osi.

Moguće vrednosti atributa align-items su:

		
#okvir {
	align-items: flex-start;
	align-items: flex-end;
	align-items: center;
	align-items: stretch;
	align-items: baseline;
}

Slika 20. - Svojstvo align-items - moguće vrednosti.

flex-start - poravnanje elemenata u odnosu na početak

Slika 21. - align-items: flex-start; - gledano u odnosu na "drugu osu poravnanja", elementi se raspoređuju uz početak.
flex-end - poravnanje elemenata u odnosu na kraj

Slika 22. - align-items: flex-end; - gledano u odnosu na drugu osu poravnanja, elementi se raspoređuju uz kraj.
center - centralno poravnanje

Slika 23. - align-items: center; - gledano u odnosu na drugu osu poravnanja, elementi se centriraju.
stretch - elementi se "razvlače" od ivice do ivice

Slika 24. - align-items: stretch; - gledano u odnosu na drugu osu poravnanja, elementi se protežu od ivice do ivice.
baseline - elementi se poravnavaju u odnosu na osnovnu ivicu za ispis teksta (donju ivicu malih slova koja nemaju donji produžetak (kakav se sreće na slovima kao što su, primera radi, "j" i "g"))

Slika 25. - align-items: baseline; - gledano u odnosu na drugu osu poravnanja, elementi se ravnaju u odnosu na donju ivicu svog tekstualnog sadržaja.

Svojstva za unutrašnje elemente - flex-shrink, flex-grow i flex

Svojstva flex-shrink, flex-grow i flex (u pitanju je skraćeni zapis prva dva atributa), pripisuju se unutrašnjim elementima koji su sadržani u flex kontejnerima, i upravo se preko tri navedena parametra obezbeđuje automatsko širenje i skupljanje.

Ako zapišemo ....

		
#centralni {
	flex-grow:   1;
	flex-shrink: 1;
}

Slika 26. - Parametri flex-shrink i flex-grow, definišu sposobnost flex elementa da se skuplja i širi..

.... centralni element stranice širiće se i skupljati (tj. "fleksovati"), po potrebi, međutim, možemo to navesti i jednostavnije:

		
#centralni {
	flex: 1;
}

Slika 27. - Skraćeni zapis parametara flex-shrink i flex-grow.

Preko koda sa gornje slike, postiže se isti efekat kao da su navedena oba parametra (flex-shrink i flex-grow), uz zadatu vrednost 1.

Ali, šta ako vrednost atributa flex nije 1?

Razmotrićemo primer sa tri elementa, pri čemu će atribut flex levog i desnog elementa imati vrednost 1, dok će vrednost atributa flex za centralni element biti 3.

Program koji prikazuje stranicu protumačiće kod na sledeći način: 1 + 3 + 1 = 5, što se može shvatiti i kao pet petina, i stoga će levi i desni element zauzeti po jednu petinu širine, dok će centralni element zauzeti tri petine.

flex_row_flex3 — Slika 28. - Neravnomerna podela u kojoj centralni element ima atribut flex sa vrednošću 3.

Pored svega što je do sada prikazano, ponovićemo da se elementima mogu zadavati i fiksne dimenzije, što omogućava jednostavnu podelu stranice (kao što ćemo videti u narednim primerima).

Podela stranice putem flexbox-a

Preko flexbox-a, lako se može uspostaviti prostorna struktura stranice (a takođe se može i promeniti), i svakako je takav pristup vrlo zanimljiv, pogotovo u kontekstu responzivnog web dizajna (čime ćemo se baviti u 6. članku).

Kao uvod u tematiku prilagođavanja strancica različitim rezolucijama ekrana (tj. različitim orijentacijama, proporcijama i sl), poslužiće jednostavan primer preraspoređivanja <div> elemenata koji ćemo prikazati u nastavku.

Horizontalna podela

U prvom koraku, flex kontejner "okvir" će biti ravnomerno podeljen po horizontali, na sledeći način:

		
* {
	margin:          0;
	padding:         0;
}

#okvir {
	width:           100vw;
	height:          100vh;

	display:         flex;
	flex-direction:  row;
	justify-content: flex-start;
	align-items:     stretch;
}

#div_01 {
	flex: 1;
	background: #ffc0b0;
}

#div_02 {
	flex: 1;
	background: #b0ffa0;
}

#div_03 {
	flex: 1;
	background: #b0d3ff;
}

Slika 29. - CSS selektori preko kojih je definisana ravnomerna horizontalna podela stranice.

Rezultat možemo videti na sledećoj slici:

flex_row_proporcionalni — Slika 30. - Stranica sa ravnomernom horizontalnom podelom.

Vertikalna podela

U drugom koraku, flex kontejner "okvir" će takođe biti podeljen ravnomerno, ali - ovoga puta 'po vertikali'.

Prepravićemo samo sledeći deo koda (ostatak "ne diramo"):

		
#okvir {
	flex-direction:  column;
}

Slika 31. - Promenom jednog parametra, definisaćemo ravnomernu vertikalnu podelu, umesto horizontalne.

Rezultat možemo videti na sledećoj slici:

flex_column_proporcionalni — Slika 32. - Stranica sa ravnomernom vertikalnom podelom.

Za kraj, prepravićemo kod tako da visina gornjeg i donjeg <div> elementa bude fiksna (kao što je uobičajeno za navigacionu traku i footer), dok će selektor div_02 ostati isti:

		
#div_01 {
	height:     60px;
	background: #ffc0b0;
}

#div_02 {
	flex: 1;
	background: #b0ffa0;
}

#div_03 {
	height:     100px;
	background: #b0d3ff;
}

Slika 33. - Za gornji i donji div element, visina je zadata fiksno.

Rezultat možemo videti na sledećoj slici:

flex_column_podela — Slika 34. - Stranica sa vertikalnom podelom kakva se često sreće na sajtovima: gornji i donji element imaju fiksnu visinu, a središnji element se po potrebi skuplja i širi.

U pitanju je podela kakvu ćemo koristiti u sledećem članku (i podela kakva se inače sreće, veoma često).

Sledeći koraci ....

Upotrebom tehnike flexbox (kao što smo videli), na veoma jednostavan način se može napraviti funkcionalna i estetski dopadljiva podela stranice, međutim, u ovom članku smo za navedeni zadatak koristili "obične" <div> elemente (odnosno tagove).

U sledećem nastavku: Web dizajn - 5. deo, pozabavićemo se HTML5 standardima i specijalizovanim div tagovima.

Autor članka Nikola Vukićević Za web portal codeblog.rs

Napomena: Tekstovi, slike, web aplikacije i svi ostali sadržaji na sajtu codeblog.rs (osim u slučajevima gde je drugačije navedeno) predstavljaju intelektualnu svojinu autora sajta codeblog.rs i zabranjeno je njihovo korišćenje na drugim sajtovima i štampanim medijima, kao i bilo kakvo drugo korišćenje u komercijalne svrhe, bez eksplicitnog pismenog odobrenja autora.