Cum funcționează proprietățile flex-grow și…

flex-grow determină în ce măsură un element poate crește atunci când există spațiu liber în container. O valoare de 0 (implicit) înseamnă că elementul nu va crește. Valorile pozitive indică coeficientul de creștere în raport cu alte elemente flex din aceeași linie.

flex-shrink determină în ce măsură un element poate să se micșoreze în cazul lipsei de spațiu liber în container. O valoare de 1 (implicit) înseamnă că poate să se micșoreze. O valoare de 0 interzice micșorarea. Valorile pozitive indică coeficientul de micșorare în raport cu alte elemente flex.

Să vedem un exemplu:

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

.container {
  display: flex;
  width: 400px; /* Lățimea containerului */
}

.item {
  flex-basis: 100px; /* Dimensiunea de bază a fiecărui element */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Va ocupa 1 parte din spațiul liber */
  flex-shrink: 0; /* Nu se va micșora */
}

.item-2 {
  flex-grow: 2; /* Va ocupa 2 părți din spațiul liber */
  flex-shrink: 1; /* Poate să se micșoreze */
}

.item-3 {
  flex-grow: 1; /* Va ocupa 1 parte din spațiul liber */
  flex-shrink: 1; /* Poate să se micșoreze */
}

În acest caz, dimensiunea totală de bază a elementelor este de 300px (3 * 100px). Spațiul liber este de 100px (400px - 300px). Acest spațiu va fi distribuit între elemente în proporție cu flex-grow: 1 + 2 + 1 = 4. Elementul 1 va primi 1/4 * 100px = 25px spațiu suplimentar. Elementul 2 va primi 2/4 * 100px = 50px spațiu suplimentar. Elementul 3 va primi 1/4 * 100px = 25px spațiu suplimentar.

Dimensiunile finale vor fi: Elementul 1: 100px + 25px = 125px Elementul 2: 100px + 50px = 150px Elementul 3: 100px + 25px = 125px

Dacă lățimea containerului ar fi insuficientă (de exemplu, 200px), ar fi nevoie de comprimare. În cazul lipsei de spațiu pentru comprimare, se iau în considerare flex-shrink și dimensiunile elementelor. Spațiul lipsă este distribuit pentru comprimare între elementele cu flex-shrink mai mare decât 0, proporțional cu flex-shrink înmulțit cu dimensiunea lor curentă (după flex-basis). Algoritmul de comprimare este puțin mai complex, dar ideea principală este că elementele cu flex-shrink mai mare sau cu dimensiune mai mare se vor comprima mai mult.

Este important să reținem că flex-basis, flex-grow și flex-shrink sunt adesea folosite împreună ca proprietate scurtă flex. De exemplu, flex: 1 1 auto; este echivalent cu flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

Prioritatea în distribuirea spațiului:

flex-basis: stabilește dimensiunea inițială a elementului.
flex-grow: distribuie spațiul liber pozitiv.
flex-shrink: distribuie spațiul liber negativ (necesitatea de comprimare).

Cum funcționează proprietățile flex-grow și flex-shrink?