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, odnosno (drugim rečima), potrebno je da se upoznamo sa 'tehnikalijama' koje omogućavaju pravilan raspored elemenata stranice.

Pri projektovanju sajtova svakako se treba pobrinuti da HTML elementi budu pre svega pravilno raspoređeni, ali (budimo iskreni), ni u kom slučaju 'ne šteti' ni to da stranice izgledaju lepo, i stoga ćemo usput pokazati i kako pravilno definisana HTML struktura utiče na vizuelnu 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, potrebno je da se prvo upoznamo sa nekolicinom novih tagova (od kojih je najvažniji tag <div> koji se koristi za definisanje podele) ....

Generički kontejneri

Ako 'malo bolje razmislimo' o strukturi dosadašnjih (jednostavnih) primera, neće biti teško da dođemo do zaključka da tagovi koje smo upotrebljavali nisu zapravo u stanju da omoguće podelu stranica.

HTML specifikacija predviđa (npr) da <a> tagovi služe za definisanje linkova prema spoljnjim stranicama, <img> tagovi služe za definisanje slika (preko <p> tagova definišu se pasusi, preko tagova <h1>-<h6> definišu se naslovi ....), međutim, u pitanju su tagovi sa konkretnom namenom, iz čega (posredno) proizilazi da nijedan navedeni tag 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).

Međutim, pored pomenutih 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.

Tag <div> (generički blok kontejner)

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') manjih zaokruženih celina unutar HTML stranice - 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 nije još uvek povezana sa CSS-om), samo definišemo tri <div> odeljka ("i ne uradimo ništa drugo") - nećemo postići mnogo po pitanju prostorne podele.

Međutim, ako svemu dodamo i prikladan CSS kod, 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 elementima se može zadati i fiksna visina (ili širina, u zavisnosti od pravca raspoređivanja), tako da ostali elementi ravnomerno popune preostali prostor.

Podela stranice koju smo upravo opisali, nešto je sa čime 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 za footer), sam tekst članka je u zasebnom <div> odeljku, a postoji još i nekoliko drugih odeljaka - i sve to čini stranicu pregledn(ij)om.

Tag <span> (generički inline kontejner)

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, osvrnućemo se pre toga i na generički inline element <span>.

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 class='crvena_slova'>crveno</span>.

Slika 2. - Tag span, koji omogućava posebno označavanje delova teksta u pasusima i sl.

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 (npr. 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 definišemo ostale elemente 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).

Flexbox - osnove

U CSS-u, termin "Flexbox" * 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 modela Flexbox je automatsko širenje i skupljanje elemenata shodno raspoloživom prostoru (sama reč "flex", u 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 Flexbox 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 (slede dodatna objašnjenja).

Svojstvo display

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

Vrednost flex, koja je navedena 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, po redosledu 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, po redosledu 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 obrću redosled (onako kako nazivi atributa sugerišu).

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 ravnaju u odnosu na početak.
flex-end - poravnanje elemenata u odnosu na kraj

Slika 15. - justify-content: flex-end; - elementi se ravnaju prema kraju.
center - centralno poravnanje

Slika 16. - justify-content: center; - elementi se raspoređuju tako da budu 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 "margine" koje su dodeljene svakom elementu budu 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 svi međuprostori budu 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, a svi ostali međuprostori su ravnomerno podeljeni.

Svojstvo align-items

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

Na primer: 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 i flex-grow (ili 'samo' flex, ukoliko prethodno navedeni atributi imaju istu vrednost), 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.

Ukoliko se navedu atributi flex-shrink i flex-grow ....

		
#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 (kao što smo nagovestili), u tipičnim situacijama kada su vrednosti atributa flex-shrink i flex-grow identične, isti efekat se može postići na jednostavniji način, preko samo jednog parametra.

		
#centralni {
	flex: 1;
}

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

Ali - šta ako vrednost atributa flex nije 1?

Da bismo razumeli kako browseri prikazuju elemente ukoliko atribut flex (na određenom elementu) nema vrednost 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.

U navedenoj situaciji, 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, a centralni element će zauzeti tri petine.

flex_row_flex3 — Slika 28. - Neravnomerna podela (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 (sledi nekoliko primera u narednom poglavlju).

Podela stranice uz upotrebu modela Flexbox

Preko modela Flexbox, 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 stranica 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" biće 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" takođe ć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 (a takva podela se sreće i inače, veoma često).

Sledeći koraci ....

Kao što smo mogli videti, model Flexbox omogućava da se napravi funkcionalna i estetski dopadljiva podela stranice (na prilično jednostavan način), 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.