Šta je Flexbox?

Flexbox (Fleksibilni Box Layout) je jednostrani model rasporeda u CSS-u, namenjen za raspodelu prostora između elemenata u kontejneru i moćne mogućnosti poravnanja. Omogućava lako upravljanje veličinama, redosledom i poravnanjem dečjih elemenata (flex-elemenata) unutar roditeljskog kontejnera (flex-kontejnera), nezavisno od njihovog početnog reda ili veličina.

Ključne koncepcije Flexbox-a:

• Flex-kontejner: Element sa display: flex ili display: inline-flex. U njemu se određuju pravila rasporeda za njegove direktne decu.
• Flex-elemenata: Direktni deca flex-kontejnera. Na njih se primenjuju svojstva Flexbox-a koja određuju njihovo ponašanje unutar kontejnera.
• Glavna osa (main axis): Osa duž koje se raspoređuju flex-elemenati. Podrazumevano je horizontalna (sa leva na desno), ali može biti promenjena svojstvom flex-direction.
• Presek osa (cross axis): Osa koja je normalna na glavnu osu.
• Početak glavne ose (main start) / Kraj glavne ose (main end): Početak i kraj duž glavne ose.
• Početak presek ose (cross start) / Kraj presek ose (cross end): Početak i kraj duž presek ose.

Osnovne osobine Flexbox-a za flex-kontejner:

• display: Određuje da li je element flex-kontejner (flex ili inline-flex).
• flex-direction: Određuje pravac glavne ose (row, row-reverse, column, column-reverse).
• flex-wrap: Određuje da li će se flex-elemenata prebacivati u novi red/kolonu ako nema mesta (nowrap, wrap, wrap-reverse).
• justify-content: Poravnava flex-elemenate duž glavne ose (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Poravnava flex-elemenate duž presek ose (flex-start, flex-end, center, baseline, stretch).
• align-content: Poravnava redove flex-elemenata (ako ih ima više zbog flex-wrap) duž presek ose.

Osnovne osobine flex-elemenata:

• order: Određuje redosled prikaza flex-elemenata (podrazumevano 0).
• flex-grow: Koeficijent rasta flex-elemenata, koji određuje koliko može da se poveća da popuni dostupni prostor.
• flex-shrink: Koeficijent skupljanja flex-elemenata, koji određuje koliko može da se smanji da bi se izbeglo prelivanje.
• flex-basis: Početna veličina flex-elemenata pre raspodele slobodnog prostora.
• flex: Skraćenica za flex-grow, flex-shrink i flex-basis.
• align-self: Prepisuje align-items za konkretan flex-elemenat.

Primer upotrebe:

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* Čini kontejner flex-kontejnerom */
  justify-content: center; /* Poravnava elemente na sredinu glavne ose */
  align-items: center; /* Poravnava elemente na sredinu presek ose */
  height: 200px; /* Za demonstraciju poravnanja */
  border: 1px solid black;
}

.flex-item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

Glavne prednosti Flexbox-a:

• Lako poravnanje elemenata horizontalno i vertikalno.
• Fleksibilno raspoređivanje prostora između elemenata.
• Laka promena reda elemenata.
• Responzivni dizajn bez korišćenja float i pozicije.
• Dobro podržan u modernim pregledačima.