Pentru ce se folosește Flexbox?

Flexbox este utilizat pentru crearea de layout-uri flexibile și responsive în CSS. Permite alinierea și distribuirea ușoară a elementelor în interiorul containerului, ajustând automat dimensiunile și pozițiile lor în funcție de spațiul disponibil.

Conceptele principale ale Flexbox:

• Container Flex: Elementul căruia i se aplică display: flex; sau display: inline-flex;. Conține elemente flex.
• Elemente Flex: Copii direcți ai containerului flex.

Flexbox permite controlul asupra:

• Direcției de aranjare a elementelor (flex-direction).
• Întreruperii elementelor pe linia/coloana următoare (flex-wrap).
• Alinierea elementelor de-a lungul axei principale (justify-content).
• Alinierea elementelor de-a lungul axei transversale (align-items pentru elemente individuale și align-content pentru mai multe rânduri/coloane).
• Ordinea de afișare a elementelor (order).
• Distribuirea spațiului liber între elemente (flex-grow, flex-shrink, flex-basis).

Exemplu de utilizare de bază:

.contenitor {
  display: flex;
  justify-content: center; /* Centrare orizontală */
  align-items: center; /* Centrare verticală */
}

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

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