Pentru ce se folosește flex în CSS?

Flexbox este utilizat pentru crearea aranjamentelor unidimensionale ale elementelor într-un container. Permite gestionarea aliniamentului, distribuției spațiului și ordinii elementelor.

Concepte cheie:

• Container Flex: Elementul părinte căruia i se atribuie display: flex sau display: inline-flex.
• Elemente Flex: Elementele copil ale containerului Flex.
• Axa Principală: Axa principală a containerului Flex. Este definită de proprietatea flex-direction. Implicit este orizontală (row).
• Axa Transversală: Axa perpendiculară pe Axa Principală.

Proprietăți cheie pentru containerul Flex:

• display: Definește dacă elementul este un container flex (flex sau inline-flex).
• flex-direction: Setează direcția axei principale (row, row-reverse, column, column-reverse).
• justify-content: Aliniază elementele flex de-a lungul axei principale (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Aliniază elementele flex de-a lungul axei transversale (flex-start, flex-end, center, baseline, stretch).
• flex-wrap: Determină dacă elementele flex trebuie să se înfășoare pe o nouă linie/coloană dacă nu există suficient spațiu (nowrap, wrap, wrap-reverse).

Proprietăți cheie pentru elementele flex:

• order: Setează ordinea vizuală a elementului flex (implicit 0).
• flex-grow: Determină cât de mult poate crește un element flex în raport cu celelalte (implicit 0).
• flex-shrink: Determină cât de mult poate scădea un element flex în raport cu celelalte (implicit 1).
• flex-basis: Setează dimensiunea inițială a elementului flex înainte de distribuirea spațiului liber (implicit auto).
• align-self: Suprascrie alinierea elementului flex de-a lungul axei transversale pentru un element specific.

Exemplu de utilizare:

.container {
  display: flex;
  justify-content: center; /* Centrare de-a lungul axei principale */
  align-items: center; /* Centrare de-a lungul axei transversale */
  height: 200px;
  border: 1px solid black;
}

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

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Acest lucru permite centrare ușoară a elementelor, crearea de grile responsive și gestionarea spațiului dintre elemente.