Cum se setează proprietățile flexbox?

Se stabilesc proprietăți pentru container (elementul asupra căruia se aplică display: flex sau display: inline-flex) și pentru descendenții săi direcți (elementele din interiorul containerului).

Proprietăți pentru container:

display: Definește ca elementul este un container flex. Valori posibile: flex (bloc) și inline-flex (în linie).
flex-direction: Setează direcția axei principale în care sunt plasate elementele flex. Valori posibile: row (implicit, de la stânga la dreapta), row-reverse (de la dreapta la stânga), column (de sus în jos), column-reverse (de jos în sus).
flex-wrap: Controlează dacă elementele flex se înfășoară pe o linie nouă dacă depășesc limitele containerului. Valori posibile: nowrap (implicit, fără înfășurare), wrap (înfășurare pe o linie nouă), wrap-reverse (înfășurare în ordine inversă).
justify-content: Aliniază elementele flex de-a lungul axei principale. Valori posibile: flex-start (începutul containerului), flex-end (sfârșitul containerului), center, space-between (spațiu egal între elemente, primul la început, ultimul la sfârșit), space-around (spațiu egal în jurul fiecărui element).
align-items: Aliniază elementele flex de-a lungul axei transversale. Valori posibile: stretch (implicit, întinde elementele pe înălțimea containerului), flex-start, flex-end, center, baseline (aliniere pe linia de bază a textului).
align-content: Aliniază liniile de elemente flex (când se folosește flex-wrap) de-a lungul axei transversale. Nu are efect dacă există o singură linie. Valori posibile: stretch (implicit), flex-start, flex-end, center, space-between, space-around.
gap, row-gap, column-gap: Stabileste distanța între elementele flex de-a lungul axelor principale și transversale.

Proprietăți pentru elemente (descendenți direcți ai containerului flex):

order: Determină ordinea de plasare a elementului în interiorul containerului. În mod implicit, toate au order: 0. Elementele cu valoare order mai mică sunt plasate înainte.
flex-grow: Determină de câte ori poate crește elementul în raport cu celelalte în cazul spațiului liber. Implicit, 0 (nu crește).
flex-shrink: Determină de câte ori poate scădea elementul în cazul lipsei de spațiu. Implicit, 1 (se micșorează).
flex-basis: Stabileste dimensiunea inițială a elementului înainte de distribuirea spațiului liber. Poate fi în pixeli, procente sau auto. Implicit, auto.
flex: Proprietate abreviată pentru flex-grow, flex-shrink și flex-basis. De exemplu, flex: 1 1 auto;.
align-self: Suprascrie valoarea align-items pentru un element individual. Valori posibile: auto (folosește valoarea align-items a părintelui), stretch, flex-start, flex-end, center, baseline.

Exemplu:

.flex-container {
  display: flex; /* Transformă elementul într-un container flex */
  flex-direction: row; /* Aranjează elementele în linie */
  justify-content: center; /* Aliniază elementele în centru pe axa principală */
  align-items: center; /* Aliniază elementele în centru pe axa transversală */
  gap: 10px; /* Setează distanța între elemente */
}

.flex-item {
  flex-grow: 1; /* Elementul poate crește */
  flex-basis: 100px; /* Dimensiunea inițială a elementului */
}

.special-item {
  order: -1; /* Acest element va fi plasat primul */
  align-self: flex-end; /* Suprascrie alinierea pe axa transversală pentru acest element */
}