Ce este Flexbox?

Flexbox (Dispunere Flexibilă a Cutiei) este un model de layout unidimensional în CSS, destinat să distribuie spațiul între elemente într-un container și să ofere capacități puternice de aliniere. Permite gestionarea ușoară a dimensiunilor, ordinii și aliniamentului elementelor copil (elemente flex) din interiorul containerului părinte (container flex), indiferent de ordinea sau dimensiunea lor inițială.

Conceptele cheie ale Flexbox:

• Container flex: Element cu display: flex sau display: inline-flex. În acest container se definesc regulile de layout pentru elementele sale directe.
• Elemente flex: Elementele copil directe ale containerului flex. Acestea au aplicate proprietăți Flexbox care determină comportamentul lor în interiorul containerului.
• Axa principală (main axis): Axa pe care sunt plasate elementele flex. În mod implicit este orizontală (de la stânga la dreapta), dar poate fi schimbată cu flex-direction.
• Axa transversală (cross axis): Axa perpendiculară pe axa principală.
• Start principal (main start) / End principal (main end): Începutul și sfârșitul de-a lungul axei principale.
• Start transversal (cross start) / End transversal (cross end): Începutul și sfârșitul de-a lungul axei transversale.

Proprietățile principale ale Flexbox pentru containerul flex:

• display: Definește că elementul este un container flex (flex sau inline-flex).
• flex-direction: Definește direcția axei principale (row, row-reverse, column, column-reverse).
• flex-wrap: Definește dacă elementele flex se vor înfășura pe o linie nouă dacă nu există suficient spațiu (nowrap, wrap, wrap-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).
• align-content: Aliniază liniile elementelor flex (dacă sunt mai multe din cauza flex-wrap) de-a lungul axei transversale.

Proprietățile principale ale Flexbox pentru elementele flex:

• order: Determină ordinea de afișare a elementului flex (implicit 0).
• flex-grow: Coeficientul de creștere al elementului flex, care determină cât de mult poate crește pentru a umple spațiul disponibil.
• flex-shrink: Coeficientul de micșorare al elementului flex, care determină cât de mult poate scădea pentru a evita depășirea.
• flex-basis: Dimensiunea inițială a elementului flex înainte de distribuirea spațiului liber.
• flex: Abreviere pentru flex-grow, flex-shrink și flex-basis.
• align-self: Suprascrie align-items pentru un anumit element flex.

Exemplu de utilizare:

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* Transformă containerul în unul flexibil */
  justify-content: center; /* Aliniază elementele în centrul axei principale */
  align-items: center; /* Aliniază elementele în centrul axei transversale */
  height: 200px; /* Pentru demonstrație */
  border: 1px solid black;
}

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

Principalele avantaje ale Flexbox:

• Aliniere ușoară a elementelor pe orizontală și verticală.
• Distribuție flexibilă a spațiului între elemente.
• Schimbare ușoară a ordinii elementelor.
• Design adaptabil fără utilizarea float și position.
• Suport bun în browserele moderne.