Ce este Flexbox?

Flexbox (Flexible Box Layout) este un modul CSS conceput pentru a crea layout-uri complexe și adaptabile. Permite gestionarea aranjamentului, aliniamentului și distribuției spațiului între elementele containerului, chiar dacă dimensiunile lor sunt necunoscute sau dinamice.

Conceptele principale ale Flexbox:

• Axa principală (main axis): Axa pe care sunt plasate elementele. Implicit, orizontală (de la stânga la dreapta).
• Axa transversală (cross axis): Axa perpendiculară pe axa principală. Implicit, verticală (de sus în jos).
• Container (flex container): Elementul pe care se aplică proprietățile Flexbox (display: flex sau display: inline-flex).
• Elemente (flex items): Elementele copil ale containerului.

Proprietăți pentru containerul Flex:

• display: flex sau inline-flex
• flex-direction: Determină direcția axei principale (row, row-reverse, column, column-reverse)
• flex-wrap: Determină dacă elementele se vor înfășura pe o linie nouă (nowrap, wrap, wrap-reverse)
• justify-content: Alinierea elementelor de-a lungul axei principale (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items: Alinierea elementelor de-a lungul axei transversale (flex-start, flex-end, center, baseline, stretch)
• align-content: Alinierea liniilor sau coloanelor de-a lungul axei transversale într-un container cu mai multe linii (flex-start, flex-end, center, space-between, space-around, stretch)

Proprietăți pentru elementele Flex:

• order: Determină ordinea elementului în container
• flex-grow: Determină cât trebuie să crească elementul pentru a ocupa spațiul disponibil
• flex-shrink: Determină cât trebuie să se micșoreze elementul dacă spațiul este insuficient
• flex-basis: Determină dimensiunea inițială a elementului înainte de distribuirea spațiului
• flex: Proprietate abreviată pentru flex-grow, flex-shrink și flex-basis
• align-self: Suprascrie alinierea elementului de-a lungul axei transversale (flex-start, flex-end, center, baseline, stretch, auto)

Exemplu de utilizare:

/* Container */
.container {
  display: flex; /* Activează Flexbox */
  flex-direction: row; /* În linie */
  justify-content: center; /* Centrare orizontală */
  align-items: center; /* Centrare verticală */
  height: 200px; /* Înălțimea containerului */
  border: 1px solid black;
}

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

Flexbox simplifică foarte mult crearea layout-urilor responsive comparativ cu metodele tradiționale (float, inline-block, table).