За шта се користи Flexbox?

Flexbox se koristi za kreiranje fleksibilnih i responzivnih rasporeda u CSS-u. Omogućava lako poravnanje i raspodelu elemenata unutar kontejnera, automatski prilagođavajući njihove veličine i položaj u zavisnosti od dostupnog prostora.

Osnovni koncepti Flexbox-a:

• Flex kontejner: Element na koji se primenjuje display: flex; ili display: inline-flex;. Sadrži flex elemente.
• Flex elementi: Direktni potomci flex kontejnera.

Flexbox omogućava kontrolu nad:

• Pravcem rasporeda elemenata (flex-direction).
• Prelaskom elemenata u sledeći red/kolonu (flex-wrap).
• Poravnanjem elemenata duž glavne ose (justify-content).
• Poravnanjem elemenata duž poprečne ose (align-items za pojedinačne elemente i align-content za više redova/kolona).
• Redosledom prikaza elemenata (order).
• Raspodelom slobodnog prostora između elemenata (flex-grow, flex-shrink, flex-basis).

Primer osnovne upotrebe:

.kontejner {
  display: flex;
  justify-content: center; /* Horizontalno centriranje */
  align-items: center; /* Vertikalno centriranje */
}

.element {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

<div class="kontejner">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>