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

flex-grow i flex-shrink kontrolišu kako flex elementi raspodeljuju slobodni prostor unutar flex kontejnera.

flex-grow:

• Određuje koji deo dostupnog slobodnog prostora u flex kontejneru će zauzeti element, ako postoji slobodan prostor.
• Podrazumevano flex-grow: 0, što znači da element ne raste.
• Vrednost - nenegativan broj.
• Ako više elemenata ima flex-grow veće od 0, slobodni prostor se raspoređuje između njih proporcionalno njihovim vrednostima flex-grow.

flex-shrink:

• Određuje koliko će se element smanjiti ako je dostupni prostor u flex kontejneru manji od sume osnovnih dimenzija svih elemenata.
• Podrazumevano flex-shrink: 1, što znači da element može da se smanji.
• Vrednost - nenegativan broj.
• Što je veća vrednost flex-shrink, to će se element više smanjiti u poređenju sa drugim elementima sa manjom vrednošću.
• Pri smanjenju, uzima se u obzir osnovna širina elementa (flex-basis ili width).

Primer:

.kontejner {
  display: flex;
  width: 500px;
  /* Ukupna širina kontejnera */
}

.element {
  flex-basis: 100px;
  /* Osnovna širina svakog elementa */
}

.element:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Podrazumevane vrednosti */
}

.element:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Ne smanjuje se */
}

.element:nth-child(3) {
  flex-grow: 0; /* Ne raste */
  flex-shrink: 2; /* Smanjuje se jače */
}

Ako je suma osnovnih širina (300px) manja od širine kontejnera (500px), preostali prostor (200px) biće podeljen između prvog i drugog elementa u odnosu flex-grow 1:2.

Ako je suma osnovnih širina veća od širine kontejnera, elementi će se smanjivati u skladu sa njihovim vrednostima flex-shrink i njihovim osnovnim dimenzijama. Element sa flex-shrink: 0 se neće smanjivati.