Na čo sa používa Flexbox?

Flexbox se uporablja za ustvarjanje prilagodljivih in odzivnih postavitev v CSS. Omogoča enostavno poravnavo in razporeditev elementov znotraj vsebnika, pri čemer se njihova velikost in položaj samodejno prilagajata razpoložljivemu prostoru.

Glavni koncepti Flexbox:

• Flex vsebnik: Element, na katerega se uporablja display: flex; ali display: inline-flex;. Vsebuje flex elemente.
• Flex elementi: Neposredni otroci flex vsebnika.

Flexbox omogoča nadzor nad:

• Smerjo razporeditve elementov (flex-direction).
• Prehodom elementov na naslednjo vrstico/stolpec (flex-wrap).
• Poravnavo elementov vzdolž glavne osi (justify-content).
• Poravnavo elementov vzdolž prečne osi (align-items za posamezne elemente in align-content za več vrstic/stolpcev).
• Redom prikaza elementov (order).
• Razporejanjem prostega prostora med elementi (flex-grow, flex-shrink, flex-basis).

Primer osnovne uporabe:

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

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