Cum să folosești flexbox pentru aranjarea elementelor…

Flexbox (sau Flexible Box Layout) este un modul CSS conceput pentru crearea de machete flexibile ale elementelor din interiorul unui container, permițând distribuirea ușoară a spațiului și alinierea elementelor, chiar și atunci când dimensiunile lor sunt necunoscute sau se schimbă dinamic.

Conceptul de bază al Flexbox este flex-container și elementele flex.

Proprietăți pentru flex-container (display: flex;):

flex-direction: determină direcția în care sunt plasate elementele flex (axa principală).
- row (implicit): orizontal, de la stânga la dreapta.
- row-reverse: orizontal, de la dreapta la stânga.
- column: vertical, de sus în jos.
- column-reverse: vertical, de jos în sus.
flex-wrap: determină dacă elementele flex se mută pe o nouă linie dacă nu încape pe cea curentă.
- nowrap (implicit): toate elementele pe o singură linie.
- wrap: se mută pe o linie nouă.
- wrap-reverse: se mută pe o linie nouă, în ordine inversă.
justify-content: aliniază elementele flex de-a lungul axei principale.
- flex-start (implicit): la începutul axei principale.
- flex-end: la sfârșitul axei principale.
- center: în centru.
- space-between: distribuție egală cu spațiu între elemente.
- space-around: distribuție egală cu spațiu în jurul elementelor.
- space-evenly: distribuție egală cu spațiu între și în jurul elementelor.
align-items: aliniază elementele flex de-a lungul axei transversale.
- stretch (implicit, dacă elementele nu au înălțimea/lățimea specificată): întinde elementele pe înălțime/lățime.
- flex-start: la începutul axei transversale.
- flex-end: la sfârșitul axei transversale.
- center: în centru.
- baseline: pe linia de bază a textului.
align-content: aliniază liniile elementelor flex pe axa transversală, atunci când există mai multe linii (flex-wrap: wrap). Funcționează similar cu justify-content, dar pentru liniile.
- stretch (implicit): întinde liniile.
- flex-start: la începutul axei transversale.
- flex-end: la sfârșitul axei transversale.
- center: în centru.
- space-between: distribuție egală cu spațiu între linii.
- space-around: distribuție egală cu spațiu în jurul liniilor.
gap, row-gap, column-gap: setează spațiile între elementele flex.

.flex-container {
  display: flex; /* Devine container flex */
  flex-direction: row; /* Elemente așezate orizontal */
  flex-wrap: wrap; /* Se mută pe o nouă linie */
  justify-content: center; /* Aliniere în centru pe axa principală */
  align-items: center; /* Aliniere în centru pe axa transversală */
  gap: 10px; /* Spațiu de 10px între elemente */
}

Proprietăți pentru elementele flex (copii direcți ai flex-containerului):

order: determină ordinea elementului în container (implicit 0). Elementele cu valori mai mici apar înainte.
flex-grow: coeficientul care determină cât de mult poate crește elementul în raport cu celelalte, ocupând spațiul disponibil. Implicit 0.
flex-shrink: coeficientul care determină cât de mult poate scădea elementul dacă spațiul este insuficient. Implicit 1.
flex-basis: dimensiunea de bază a elementului înainte de distribuirea spațiului liber. Poate fi în px, %, rem, auto etc. (implicit auto).
flex: proprietate scurtă pentru flex-grow, flex-shrink, flex-basis.
align-self: suprascrie alinierea elementului pe axa transversală, conform align-items. Poate avea aceleași valori.

.flex-item {
  order: 2; /* Acest element va fi al doilea */
  flex-grow: 1; /* Va ocupa spațiul rămas */
  flex-shrink: 0; /* Nu va scădea */
  flex-basis: 100px; /* Dimensiune de bază 100px */
  align-self: flex-start; /* Aliniere la început */
}

.another-item {
  flex: 1 1 auto; /* grow: 1, shrink: 1, basis: auto */
}

Flexbox permite crearea diverselor machete, de la simple aliniamente până la structuri responsive mai complexe, controlând distribuirea spațiului și alinierea elementelor din interiorul containerului.

Cum să folosești flexbox pentru aranjarea elementelor pe pagină?