Kako funkcionišu svojstva flex-grow i flex-shrink?

flex-grow i flex-shrink određuju kako elementi fleksibilno prilagođavaju svoju veličinu unutar flex kontejnera, redom kada postoji slobodan prostor ili kada je prostora nedovoljno.

flex-grow - određuje koeficijent po kojem element treba da raste kada u kontejneru postoji slobodan prostor. Podrazumevana vrednost je 0 (element se ne širi). Ako više elemenata ima flex-grow veće od 0, slobodan prostor se raspoređuje između njih proporcionalno njihovim flex-grow vrednostima.

.item {
  flex-grow: 1; /* Element će koristiti sav dostupni slobodni prostor */
}

flex-shrink - određuje koeficijent po kojem element treba da se skuplja kada u kontejneru nema dovoljno prostora. Podrazumevana vrednost je 1 (element se skuplja proporcionalno ostalim skupljajućim elementima). Vrednost 0 sprečava skupljanje elementa.

.item {
  flex-shrink: 0; /* Element se neće skupljati */
}

Zajedno sa flex-basis, formiraju skraćenu osobinu flex: flex: <flex-grow> <flex-shrink> <flex-basis>.

Primer upotrebe:

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

.container {
  display: flex;
  width: 400px; /* Primer fiksne širine kontejnera */
}

.item {
  flex-basis: 100px; /* Osnovna veličina svih elemenata */
}

.item-1 {
  flex-grow: 1; /* Item 1 će koristiti slobodan prostor */
}

.item-2 {
  flex-shrink: 0; /* Item 2 se neće skupljati */
}

Ako je kontejner širi od 200px (100px + 100px), item-1 će zauzeti sav preostali slobodni prostor. Ako je već 200px, item-2 će zadržati svoju osnovnu veličinu od 100px, a item-1 će se skupljati.