Cum se pot modifica flexibil dimensiunile elementelor care utilizează flexbox?

Este posibil să modificați dimensiunile elementelor în flexbox în mod flexibil folosind proprietățile flex-grow, flex-shrink și flex-basis.

• flex-grow: Determină în ce măsură un element poate să se extindă, ocupând spațiul liber din container. Valoarea implicită este 0 (nu se extinde). O valoare mai mare indică un coeficient de extindere mai mare în raport cu celelalte elemente.
• flex-shrink: Determină în ce măsură un element poate să se comprime în cazul lipsei de spațiu liber. Valoarea implicită este 1 (se comprimă). O valoare mai mare indică un coeficient de comprimare mai mare.
• flex-basis: Determină dimensiunea de bază a elementului înainte de distribuirea spațiului liber. Poate fi setată ca o valoare fixă (px, %, rem) sau un cuvânt cheie (auto, content).

Aceste trei proprietăți sunt adesea combinate în proprietatea scurtă flex: flex: <flex-grow> <flex-shrink> <flex-basis>;.

Exemple de utilizare:

/* Elementul va ocupa tot spațiul disponibil */
.flex-item {
  flex-grow: 1;
}

/* Elementul nu se va comprima în cazul lipsei de spațiu */
.flex-item {
  flex-shrink: 0;
}

/* Elementul are o dimensiune de bază de 100px și se extinde dacă există spațiu */
.flex-item {
  flex: 1 1 100px;
}

/* Elementul are o dimensiune de bază determinată de conținutul său și poate să se comprime */
.flex-item {
  flex: 0 1 auto; /* Echivalent cu `flex: initial;` */
}

/* Elementul nu se extinde, nu se comprimă și are o dimensiune de bază determinată de conținut */
.flex-item {
  flex: 0 0 auto; /* Echivalent cu `flex: none;` */
}

/* Elementul se extinde, se comprimă și are o dimensiune de bază de 0 (util pentru crearea de elemente de aceeași lățime) */
.flex-item {
  flex: 1 1 0; /* Echivalent cu `flex: auto;` */
}

Utilizarea acestor proprietăți permite controlul precis al comportamentului elementelor din interiorul unui container flex atunci când dimensiunea ecranului sau a conținutului se modifică.