CSS Flexbox kontejner

Već znamo da se flexbox model zasniva na dva tipa elemenata - flex-kontejneru unutar koga se može nalaziti jedan ili više flex-elemenata. Naravno, ne postoje prepreke da bilo koji flex-element takođe bude i flex-kontejner. U ovom tekstu ćemo se baviti CSS atributima koji se odnose na flex-kontejner.

Flex-kontejner
display Definisanje flex kontejnera - da bi neki objekat postao flex kontejner, zadajemo mu vrednost flex ili inline-flex.
flex-direction Osnovni pravac - da li se flex-elementi ređaju horizontalno (row) ili vertikalno (column).
flex-wrap Raspored u više linija - da li se flex-elementi koji prevazilaze dimenzije flex-kontejnera prebacuju u novi red/kolonu.
flex-flow Kompleksan atribut koji pokriva vrednosti flex-direction i flex-wrap atributa.
justify-content Poravnanje flex-elemenata po osnovnom pravcu
align-content Poravnanje linija po ukrštenom pravcu
align-items Poravnanje flex-elemenata unutar linije, po ukrštenom pravcu

Ovi atributi se odnose na generalno raspoređivanje elemenata - zadavanje osnovnog i ukrštenog pravca, višelinijski prikaz, poravnanje odnosno centriranje elemenata. Sa druge strane, ponekad je potrebno zadati neke parametre tačno određenom elementu. U posebnoj lekciji obrađujemo atribute koji se odnose na flexbox elemente.

U uvodnoj lekciji o Flexbox modelu smo objasnili neke osnovne pojmove. Pošto se u ovom tekstu posebno zahteva razumevanje flexbox terminologije, najbolje da se podsetimo sa čime radimo:

Osnovni termini u flexbox modelu

Osnovni pravac (main axis) je pravac ređanja elemenata, dok je ukršteni pravac (cross axis) pravac koji je pod pravim uglom u odnosu na osnovni pravac. Drugim rečima, ako je zadato da se elementi ređaju horizontalno (po redovima), ukršteni pravac je vertikalan (po kolonama) i obrnuto.

Elementima može biti zadat i raspored u više linija (wrap) koje se smeštaju jedna za drugom po ukrštenom pravcu.

display

Iako display ne spada zaista u flexbox atribute, bez njega nikako ne možemo. Naime, pomoću ovog atributa definišemo flex-kontejner. Postoje dve vrednosti koje su nam ovde značajne:

Dakle, flex elementi su u stvari blokovi koji se u normalnom toku elemenata ređaju jedan ispod drugog, dok se inline-flex elementi ređaju jedan pored drugog, kao i inline blokovi.

Jednom kada element proglasimo za flex-kontejner, svi njegovi podelementi (direktno podređeni, ne i elementi-unutar-elemenata) automatski postaju flex-elementi - bez obzira da li su "prirodno" blok ili inline elementi.

flex-direction

Ovim atributom zadajemo osnovni pravac i smer ređanja flex-elemenata unutar flex-kontejnera. Moguće vrednosti su:

Ovim atributom definišemo osnovni pravac (main axis), a samim tim i ukršteni pravac (cross axis). Znači, ako je osnovni pravac row, tj. ako se elementi ređaju jedan za drugim, s leve na desnu stranu, onda će se u višelinijskom prikazu otvoriti mogućnost za više redova koji se pojavljuju jedan ispod drugog.

Primer za flex-direction


<style>
  .kont {
    display: inline-flex;
    align-items: flex-start;
  }
  .k1 {
    flex-direction: row;
  }
  .k2 {
    flex-direction: row-reverse;
  }
  .k3 {
    flex-direction: column;
  }
  .k4 {
    flex-direction: column-reverse;
  }
</style>

<!--
  <div class="kont k1">
    <b>1</b> <b>2</b> <b>3</b>
  </div>
-->
<h2>flex-direction</h2> <div class="kont k1"> <b>1</b> <b>2</b> <b>3</b> </div> <div class="kont k2"> <b>1</b><b>2</b><b>3</b> </div> <div class="kont k3"> <b>1</b><b>2</b><b>3</b> </div> <div class="kont k4"> <b>1</b><b>2</b><b>3</b> </div> <br> <div class="kont-title">row</div> <div class="kont-title">row-reverse</div> <div class="kont-title">column</div> <div class="kont-title">column-reverse</div>

Svaki "žuti" bok je u stvari flex-kontejner i ponaša se kao inline-block (ređa se jedan za drugim), pošto je zadat display: inline-flex. Svakom je zadat drugačiji flex-direction atribut, i možete videti da bez obzira što su unutar njega obični <b> elementi, oni postaju flex-elementi i ponašaju se prema flexbox pravilima.

p-direction

flex-wrap

Ovaj atribut je u stvari veoma značajan, pošto njime definišemo višelinijski prikaz. Samim tim, definišemo i izgled i ponašanje našeg flexboxa, pošto neki atributi funkcionišu ili ne funkcionišu upravo zavisno od ovog atributa. Ovo su moguće vrednosti:

Primer za flex-wrap


<style>
  .kont {
    display: inline-flex;
    align-items: flex-start;
  }
  .k0 {
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .k1 {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .k2 {
    flex-direction: row;
    flex-wrap: wrap-reverse;
  }
  .k3 {
    flex-direction: column;
    flex-wrap: wrap;
  }
  .k4 {
    flex-direction: column;
    flex-wrap: wrap-reverse;
  }
</style>
<h2>flex-wrap</h2> <div class="kont k0"> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <div class="kont k1"> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> <b>6</b> </div> <div class="kont k2"> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> <b>6</b> </div> <div class="kont k3"> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> <b>6</b> </div> <div class="kont k4"> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> <b>6</b> </div> <br> <div class="kont-title">(row)<br>nowrap</div> <div class="kont-title">(row)<br>wrap</div> <div class="kont-title">(row)<br>wrap-reverse</div> <div class="kont-title">(column)<br>wrap</div> <div class="kont-title">(column)<br>wrap-reverse</div>

p-wrap

flex-flow

Kompleksan atribut koji suštinski zamenjuje flex-direction i flex-wrap. Može se zadati jedna ili (logičnije) obe vrednosti. Na taj način u jednom potezu određujemo osnovni pravac i prikaz u više linija.

Na primer:

flex-flow: row wrap;

justify-content

Ovaj atribut predstavlja poravnanje flex-elemenata po osnovnom pravcu. Važno je da se setite da osnovni pravac ima i smer, a samim tim i stranu, tj. "ivicu" od koje lementi počinju da se ređaju, kao i stranu koja bi bila krajnja, tj. prema kojoj se ređaju. Za row, početak je levo, dok je za za row-reverse, početak desno. Slično, za column, početak je gore, dok je za column-reverse početak dole.

Ceo ovaj uvod nam služi da razjasnimo zašto za ovaj (i njemu slične atribute) ne možemo da prosto zadamo vrednost npr. "left" ili "right" za poravnanje elemenata. Vidite, kad radimo sa flexboxom, zbog toga što se elementi mogu ređati s leva na desno ili s desna na levo, nije dobra ideja vezivati se za "levo" i "desno", već pre za "početak" i "kraj".

Vrednosti koje možemo da koristimo su:

Postoje i tri vrednosti koje podjednako raspoređuju elemente. Ovo bi bile tri varijante justify vednosti, kada bi postojala.

Primer za justify-content


<style>
  .kont {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .k1 {
    justify-content: flex-start;
  }
  .k2 {
    justify-content: flex-end;
  }
  .k3 {
    justify-content: center;
  }
  .k4 {
    justify-content: space-between;
  }
  .k5 {
    justify-content: space-around;
  }
  .k6 {
    justify-content: space-evenly;
  }
</style>
<h2>justify-content</h2> <div class="kont k1"> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <div class="kont k2"> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <div class="kont k3"> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <br> <div class="kont-title">flex-start</div> <div class="kont-title">flex-end</div> <div class="kont-title">center</div> <br> <div class="kont k4"> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <div class="kont k5"> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <div class="kont k6"> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <br> <div class="kont-title">space-between</div> <div class="kont-title">space-around</div> <div class="kont-title">space-evenly</div>

Kod vrednosti space-around, razmak oko svakog elementa je podjednake širine, pa tako dobijamo utisak da je razmak među elementima duplo veći (to su u stvari dva razmaka jedan pored drugog) nego razmak između elemenata i ivice kontejnera. Kod vrednosti space-evenly, ovaj problem je rešen jer su razmaci tako proračunati da budu svuda jednaki.

p-juscont

align-content

Definiše način kako će sve linije biti poravnate po ukrštenom pravcu. Dakle, ovaj atribut se bavi celim linijama (redovima ili kolonama). Kako god da se linije rasporede, uvek "nose" sa sobom svoje flex-elemente, koji takođe mogu biti poravnati po osnovnom (justify-content) i ukrštenom pravcu (align-items) unutar samih linija. Ovo su vrednosti koje atribut align-content može imati:

Osim kada važi vrednost stretch, svaka linija ima dimenziju (po ukrštenom pravcu) najvećeg flex-elementa.

Vrednost ovog atributa nema efekta na prikaz ako ne postoji više linija (dakle obavezan je wrap ili wrap-reverse). Kada višelinijski prikaz nije uključen, jedina postojeća linija je uvek razvučena preko cele površine po ukrštenom pravcu. Međutim, kada je omogućen višelinijski prikaz, (npr. flex-wrap:wrap), tada čak i kada postoji samo jedna linija elemenata, veličina te linije zavisi od ovog atributa.

 
Ako je zadato npr. align-content:flex-start, na prvoj slici vidimo kako izgleda linija, kada ne postoji višelinijski prikaz (flex-wrap), a na drugoj kada postoji. Primetite razliku, čak i kada nema dovoljno elemenata da se pređe u drugu liniju. U prvom slučaju atributom align-content ništa ne postižemo, a u drugom njime određujemo položaj linije.

Primer za align-content


<style>
  .kont {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .k1 {
    align-content: flex-start;
  }
  .k2 {
    align-content: flex-end;
  }
  .k3 {
    align-content: center;
  }
  .k4 {
    align-content: space-between;
  }
  .k5 {
    align-content: space-around;
  }
  .k6 {
    align-content: stretch;
  }
  .k7 {
    align-content: stretch;
    align-items: flex-start;
  }
</style>
<h2>align-content</h2> <div class="kont k1"> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <div class="kont k2"> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <div class="kont k3"> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <br> <div class="kont-title">flex-start</div> <div class="kont-title">flex-end</div> <div class="kont-title">center</div> <br> <div class="kont k4"> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <div class="kont k5"> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <div class="kont k6"> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <div class="kont k7"> <b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <br> <div class="kont-title">space-between</div> <div class="kont-title">space-around</div> <div class="kont-title">stretch</div> <div class="kont-title">stretch<br>(flex-start)</div>

U svim kontejnerima (osim poslednjeg), flex-elementi po vertikali pokrivaju celu visinu linije, tako da možete videti da su linije samo kod vednosti stretch razvučene da pokriju celu vertikalu.

p-alcont

To je sledeća stvar kojom se bavimo, ali primetite da su zahvaljujući atributu align-items u poslednjem kontejneru flex-elementi vertikalno poravnati ka vrhu svojih linija i tada ne zauzimaju celu liniju po vertikali.

Da biste shvatili kako funkcionišu atributi align-content i align-items kao i razliku između njih, morate shvatiti razliku između sledećih slučajeva:

 
Slučaj kada su linije razvučene da pokriju celu vertikalu i kada su podjednako raspoređene sa razmakom. U prvom slučaju su linije fiksirane (align-content:stretch), ali možemo pomerati elemente unutar njih (align-items). U drugom slučaju, linije su aranžirane atributom align-content, a elementi unutar njih se mogu pomerati samo onoliko koliko im visina linija dozvoljava (visina zavisi od najvećeg elementa).

align-items

Definiše način kako će flex-elementi biti poravnati unutar svoje linije, po ukrštenom pravcu. Posebno je vidljivo kada objekti imaju različine dimenzije i kada su linije razvučene po ukrštenom pravcu.

Teško ćete videti efekat ovog atributa ako su objekti jednakih dimenzija, a linije nisu razvučene (align-content nije stretch).

Primer za align-items


<style>
  .kont {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
  }
  .k1 {
    align-items: flex-start;
  }
  .k2 {
    align-items: flex-end;
  }
  .k3 {
    align-items: center;
  }
  .k4 {
    align-items: baseline;
  }
  .k5 {
    align-items: stretch;
  }
</style>
<h2>align-items</h2> <div class="kont k1"> <b>1</b> <b style="padding-top:8px;">2<br>2<br>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <div class="kont k2"> <b>1</b> <b style="padding-top:8px;">2<br>2<br>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <div class="kont k3"> <b>1</b> <b style="padding-top:8px;">2<br>2<br>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <div class="kont k4"> <b>1</b> <b style="padding-top:8px;">2<br>2<br>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <div class="kont k5"> <b>1</b> <b style="padding-top:8px;">2<br>2<br>2</b> <b>3</b> <b>4</b> <b>5</b> </div> <br> <div class="kont-title">flex-start</div> <div class="kont-title">flex-end</div> <div class="kont-title">center</div> <div class="kont-title">baseline</div> <div class="kont-title">stretch</div>

Dakle ovde imamo horizontalni osnovni pravac (row) i to u više linija (wrap). Linije su razvučene po vertikali (stretch), tako da elementi imaju "lufta", a sami flex-elementi su poravnati ulevo (flex-start). Demonstriramo kako se flex-elementi poravnavaju međusobno po vertikali, unutar svake linije. Efekat najviše liči na to kada inline-blokovima zadajemo atribut vertical-align.

p-alit

Namerno smo drugom flex-elementu dodali više sadržaja kako bi imao veću visinu i još smo mu povećali gornji padding, da biste uočili razliku između poravnanja tipa flex-start (prema gornjoj ivici) i baseline (prema tekstu).

Ok, sada smo svašta naučili. Praktično već možemo da pravimo sasvim funkcionalne layoute pomoću flexboxa. Možete slobodno malo da radite sa ovim atributima, shvatite kako koji od njih funkcioniše, a zatim nastavite sa proučavanjem flexbox elemenata.

Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.