Svi stilovi koji se dodaju u CSS doprinose izgledu stranice, ali jako je važno imati na umu da i pravilno definisana struktura HTML dokument utiče na estetiku same stranice pa tako i celog sajta. Svaki od tagova koji se do sada koristio za dodavanje elemenata na stranici je imao svoju funkciju, pa je tako <img> tag služio da se na stranici prikažu slike, <a> tag je definisao linkove ka delovima stranice ili drugim stranica, <p> tag je označavao da se na tom delu nalazi neki tekst itd. Svi ovi tagovi imaju konkretnu namenu i nijedan se ne može koristiti za definisanje strukture veb stranice.
Tu na scenu stupaju tzv tagovi opšte namene koji nemaju funkciju u smislu da će njihovo korišćenje prikazati neki novi element na stranici, ali će biti vrlo pogodni za definisanje strukture i rasporeda elemenata na stranici. Govorimo, naravno o tagu <div> ( eng. division što znači podela).
To je blokovski element, podsećamo to su elementi koji zauzimaju celu širinu roditeljskog elementa bez obzira na sadržaj, ako je roditeljski element body onda celu širinu ekrana i mogu sadržati druge blok i inline elemente. Često se o njima govori i kao o kontejnerima ili kutijama jer su pogodni da se u njih ubace drugi elementi što olakšava stilizovanje i raspored elemenata na stranici, kao i jednostavnije prilagođavanje različitim dimenzijama ekrana.
U ovom primeru div služi kao kontejner za listu koja je deo footer-a:
<div class="box-footer">
<ul>
<li>Ulica Boška Buhe 42</li>
<li>Novi Beograd</li>
<li>Tel: 0651112223</li>
</ul>
</div>Na ovaj način je u mnogome olakšano dodavanje CSS stilova.
Sam div tag se neće videti na stranici jer nema ni tekstualne ni grafičke odrednice, ali dodavanjem CSS omogućava se raspoređivanje elemenata jedan pored drugog sa fiksnom širinom i visinom ili sa jednakim zauzimanjem prostora. To je uobičajen način raspoređivanja elemenata koji se može sresti gotovo na svakom sajtu.
Ne toliko moćan ali veoma koristan je i <span> tag (eng. span -raspon) koji predstavlja linijski element. Ne može se koristiti za strukturu HTML dokument ali se koristi za stilizovanje delova teksta, pasus, naslova, delova nekih lista i slično.
Flex box predstavlja način uz pomoć koga je moguće fleksibilno rasporediti elemente na stranici ravnomerno ili u drugim razmerama (Flex eng. prilagodljivost). Ključno je za shvatanje funkcionisanja Flex box-a je to da HTML element, obično div tag preuzima ulogu flex kontejnera unutar koga se raspoređuju elementi na stranici. U primeru koji sledi postoji roditeljski element sa klasom okvir unutar koga se nalaze tri div-a koji će se na stranici rasporediti po pravilima flex box-a.
<div class="okvir">
<div class="kutija prvi">PRVI</div>
<div class="kutija drugi">DRUGI</div>
<div class="kutija treci">TRECI</div>
</div>Odgovarajući CSS koji će to omogućiti je dat u sledećem kodu:
.okvir {
/* svojstva za rasporedjivanje elemenata jedan pored drugog */
display: flex;
/* poravnjanje po x osi */
justify-content: center;
/* poravnjanje po y osi */
align-items: center;
/* razmak izmedju elemenata */
gap: 2rem;
}
.kutija {
width: 14rem;
height: 14rem;
border: 3px solid rgb(49, 46, 46);
}
.prvi {
background-color: #4B5945;
}
.drugi {
background-color: #66785F;
}
.treci {
background-color: #91AC8F;
}Ako svojstva display ima vrednost flex to će element pretvorit u flex kontejner, a njegove potomke u flex elemente i automatski ih poređati jedan pored drugog u nizu, pa će se i visina svih elemenata izjednačiti sa najvišim elementom. Vrednost flex primenjena na inline elemente kao što su npr <a> tagovi će taj element pretvoriti u blok element.
Određuje pravac i smer rapoređivanja elemenata. Vrednosti ovog svojstva mogu biti:
.okvir {
/* podrazumevana vrednost */
flex-direction: row; /* raspoređivanje elemenata sleva nadesno jedan pored drugog */
flex-direction: column; /* raspoređivanje elemenata odozgo nadole jedan ispod drugog */
flex-direction: row-reverse; /* raspoređivanje zdesna nalevo */
flex-direction: column-reverse; /* raspoređivanje odozdo nagore */
}Koristi se za poravnjanje elemenata po glavnoj horizontalnoj osi
.okvir {
/* podrazumevano */
justify-content: flex-start; /* poravnanje u odnosu na početak */
justify-content: flex-end; /* poravnanje u odnosu na kraj */
justify-content: center; /* centralno poravnanje */
justify-content: space-between; /* najveća udaljenost elemenata u odnosu na roditeljski div */
justify-content: space-around; /* automatsko poravnanje sa jednakim marginama */
justify-content: space-evenly; /* jednako prostor između svih elemenata */
}Ovo svojstvo se koristi da poravna elemente u odnosu na y osu
.okvir {
/* podrazumevano */
align-items: stretch;
align-items: flex-start; /* poravnanje u osnosu na početak */
align-items: flex-end; /* poravnanje u odnosu na kraj */
align-items: center; /* centralno poravnanje */
align-items: baseline; /* poravnanje u odnosu na donju ivicu teksta */
}