nav_dugme codeBlog codeBlog
  • početna Početna stranica
  • Sačuvani članci Sačuvani članci
  • Članci
     (spisak)
  • Kontakt
Povratak na vrh stranice

Info & povezani članci Info o članku - dugme

Info

trejler_sat Datum objave: 03.10.2020.

trejler_dokument Jezici: HTML,
CSS

trejler_teg_narandzasti Težina: 7/10

HTML
CSS
web dizajn
internet
dom
frontend
teorija

Tema: Web dizajn

1. Početni koraci2. Klasa - Id - Interni i linijski CSS3. CSS Box i pseudoklase5. HTML 5 struktura i tagovi - Podela stranice6. Responzivni web dizajn7. Podešavanja editora i efikasna obrada tekstaUvod u JavaScript i DOM (Document Object Model)

Povezani članci

Osnove računarske grafike i formati slika u web dizajnuFontovi u web dizajnu (osnove tipografije)Pokretanje lokalnog web serveraUvod u PHP i backend programiranjeStruktura web adresa i pristup internet stranicamaNapredni parametri internet pretrageLokalno skladištenje podataka browsera (sessionStorage, localStorage, cookies)Izbor prvog programskog jezikaAsinhrono programiranje u JavaScriptuASCII, UNICODE i UTF - Predstavljanje znakova na računarima
Svi članci
Programming isn't about what you know; it's about what you can figure out.
Chris Pine

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

Facebook LinkedIn Twitter Viber WhatsApp E-mail
zoom_plus zoom_minus bookmark
početna > Članci > Saveti

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 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' 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 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, 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.

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.

Da se osvrnemo još jednom na izraz "generički kontejner": termin "generički" označava pojave opšteg tipa (to jest, odsustvo konkretne namene, odnosno "nespecijalizovanost"), dok izraz "kontejner" (u bukvalnom prevodu sa engleskog, sud ili posuda), označava predmet pogodan za smeštaj drugih predmeta.

Div je tag opšteg tipa, pogodan za smeštaj drugih tagova.

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.

U apstraktnom smislu, elementi će vizuelno biti poređani jedan "ispod" drugog, ali - u praktičnom smislu - <div> elementi se neće ni videti, jer nemaju: ni (tekstualni) sadržaj, ni grafičke odlike zadate preko CSS-a.

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.

Stranica na kojoj se trenutno nalazite, zapravo koristi specijalizovane div kontejnere koji su deo specifikacije HTML5 ('kako i dolikuje u 21. veku').

U pitanju su tagovi koji imaju semantičko značenje, ali, po osnovnim tehničkim karakteristikama (u smislu toga kako im se pristupa preko CSS-a i sl) - radi se o običnim <div> elementima. :)

Međutim, nemojte za sada brinuti o navedenim detaljima (HTML5 standardi i semantički tagovi biće tema narednog članka, a sve što budete naučili o tehničkim osobinama običnih <div> tagova, odnosi se i na pomenute specijalizovane HTML5 tagove).

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").

Pošto smo preko parametara width i height "razvukli" <div> okvir preko celog radnog prozora u browseru, želimo - time što će ceo prozor biti obojen izabranom bojom - da se uverimo da je sve u redu.

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

Osvrnimo se i na univerzalni selektor *, preko koga se definišu margine i padding za sve elemente.

Margine HTML elementa imaju podrazumevanu vrednost, koja nije 0 (najčešće je 4px), što narušava estetiku stranice u izvesnoj meri (pri tom, padding takođe nije 0 'po default-u'), i stoga je najlakše preko univerzalnog selektora ukinuti margine i padding za celu stranicu (odnosno, za sve elemente).

Time je početna situacija "iznivelisana", posle čega je pojedinim elementima moguće zadavati margine i padding po želji (prosto rečeno - samo tamo gde je potrebno).

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 elemenata 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.

Naravno, nije uvek bilo tako ....

Do pre samo desetak godina (tj. do pojave flexbox-a, cca. 2010), programeri su morali da se dovijaju, na razne načine, zarad obavljanja (reklo bi se) krajnje osnovnih zadataka, kao što je npr: vertikalno centriranje teksta i slika, širenje i skupljanje elemenata i sl.

Shodno navedenom, nije teško zaključiti i zašto je flexbox (kao takav), veoma važan deo responzivnog web dizajna. *

* Responzivni web dizajn = skup tehnika preko kojih se postiže optimalan prikaz stranice bez obzira na fizičke dimenzije ekrana (ili, u širem smislu - uređaja), na kome se stranica prikazuje.

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 ....

* Hoćemo reći: flex kontejner je u najosnovnijem smislu blok element (a ne linijski).

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)
    flex_direction_row
    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)
    flex_direction_column
    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
    flex_direction_reverse_row
    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
    flex_direction_reverse_column
    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
    justify_content_flex_start
    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
    justify_content_flex_end
    Slika 15. - justify-content: flex-end; - elementi se raspoređuju tako da se ravnaju prema kraju.
  • center - centralno poravnanje
    justify_content_center
    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)
    justify_content_space_around
    Slika 17. - justify-content: space-around; - elementi se raspoređuju tako da su "margine" koje su dodeljene svakom elementu - identične.
  • * Nisu (naravno) u pitanju CSS box margine u doslovnom smislu, već se radi o automatskom definisanju međuprostora između elemenata.

  • 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
    justify_content_space_evenly
    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
    justify_content_space_between
    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'.

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
    align_items_flex_start
    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
    align_items_flex_end
    Slika 22. - align-items: flex-end; - gledano u odnosu na drugu osu poravnanja, elementi se raspoređuju uz kraj.
  • center - centralno poravnanje
    align_items_center
    Slika 23. - align-items: center; - gledano u odnosu na drugu osu poravnanja, elementi se centriraju.
  • stretch - elementi se "razvlače" od ivice do ivice
    align_items_stretch
    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"))
    align_items_baseline
    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, a centralni element će 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 (sledi nekoliko primera u narednom odeljku).

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" 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.

Drugim rečima: dovoljno je bilo prepraviti vrednost samo jednog atributa.

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 ....

Kao što smo mogli videti, model flex-box omogućava da se napravi funkcionalna i estetski dopadljiva podela stranice (na prilično jednostavan način), međutim, u ovom članku, za navedeni zadatak koristili smo "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.
© 2020-2025. Sva prava zadržana.
Facebook LinkedIn Twitter Viber WhatsApp E-mail
početna > Članci > Uvod u web dizajn - 4. deo - Tagovi div i span - Flex box
codeBlog codeBlog
Sajt posvećen popularizaciji kulture i veštine programiranja.
Napomena: Tekstovi i slike 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 odobrenja autora.
© 2020-2025. Sva prava zadržana.
Facebook - logo
Instagram - logo
LinkedIn - logo
Twitter - logo
E-mail
Naslovna
   •
Uslovi korišćenja
   •
Obaveštenja
   •
FAQ
   •
Kontakt