flex (grow, shrink, basis) în CSS: explicație, valori și exemple

flex: 1; /* crește și ocupă tot spațiul rămas (flex: 1 1 0%) */ flex: auto; /* flex: 1 1 auto */ flex: none; /* fix, nu se micșorează, nu crește (flex: 0 0 auto) */ flex: 0 0 250px; /* lățime fixă de 250px (ex. sidebar) */

Ce face `flex (grow, shrink, basis)`

Proprietatea flex dictează cum reacționează un element individual atunci când există spațiu suplimentar sau insuficient în container.

Cei trei parametri:
1. flex-grow: cât de mult crește elementul pentru a absorbi spațiul liber (1 înseamnă că împarte spațiul egal cu ceilalți).
2. flex-shrink: cât de mult se poate micșora elementul dacă spațiul este prea îngust (0 previne turtirea lui).
3. flex-basis: dimensiunea inițială de pornire înainte de distribuirea spațiului.

Valori uzuale

Valoare	Descriere
`flex: 1`	Elementul se extinde pentru a umple tot spațiul liber rămas.
`flex-grow`	Factor de creștere numeric (0 = nu crește, 1 = crește proporțional).
`flex-shrink`	Factor de micșorare numeric (0 = nu se lasă micșorat sub mărimea sa).
`flex-basis`	Dimensiunea inițială (px, rem, % sau auto).

Exemple

Exemplul 1: Layout clasic cu bară laterală fixă și conținut flexibil

Bara laterală rămâne la 280px, iar conținutul principal ocupă tot restul ecranului.

.layout {
  display: flex;
  gap: 20px;
}
.sidebar {
  flex: 0 0 280px; /* fix 280px, nu crește, nu scade */
}
.continut-principal {
  flex: 1;         /* ocupă tot spațiul liber rămas */
}

Efect vizual în browser

Bara din stânga are exact 280px lățime, iar coloana din dreapta se întinde automat pe restul ferestrei.

Greșeli frecvente

Scrierea proprietăților separate flex-grow, flex-shrink și flex-basis manual; este recomandat de către W3C să folosești scurtătura flex: 1 sau flex: 0 0 200px pentru că gestionează corect valorile implicite.

Comenzi înrudite

display: flex: Transformă elementul într-un container flexibil; toți copiii direcți devin elemente flex așezate automat în linie.
align-self: Suprascrie alinierea verticală (align-items) a containerului pentru un singur element copil individual.

Ce face flex (grow, shrink, basis)