Ako fungujú vlastnosti flex-grow a flex-shrink…

flex-grow a flex-shrink kontrolujú, ako sa flex prvky rozdeľujú voľný priestor vnútri flex kontajnera.

flex-grow:

Určuje, akú časť dostupného voľného priestoru vo flex kontajneri zaberie prvok, ak je voľný priestor.
Predvolene flex-grow: 0, čo znamená, že prvok nerastie.
Hodnota - nezáporné číslo.
Ak má viac prvkov flex-grow väčšie ako 0, voľný priestor sa rozdeľuje medzi ne pomerom ich hodnôt flex-grow.

flex-shrink:

Určuje, ako veľmi sa prvok zmenší, ak je dostupný priestor v flex kontajneri menší ako súčet základných veľkostí všetkých prvkov.
Predvolene flex-shrink: 1, čo znamená, že prvok sa môže zmenšiť.
Hodnota - nezáporné číslo.
Čím väčšia je hodnota flex-shrink, tým viac sa prvok zmenší v porovnaní s ostatnými s menšou hodnotou.
Pri zmenšení sa berie do úvahy základná šírka prvku (flex-basis alebo width).

Príklad:

.kontejner {
  display: flex;
  width: 500px;
  /* Celková šírka kontajnera */
}

.prvok {
  flex-basis: 100px;
  /* Základná šírka každého prvku */
}

.prvok:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Predvolené hodnoty */
}

.prvok:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Nezmenšuje sa */
}

.prvok:nth-child(3) {
  flex-grow: 0; /* Nezväčšuje sa */
  flex-shrink: 2; /* Zmenšuje sa viac */
}

Ak súčet základných šírok (300px) je menší ako šírka kontajnera (500px), zostávajúci priestor (200px) bude rozdelený medzi prvý a druhý prvok v pomere flex-grow 1:2.

Ak je súčet základných šírok väčší ako šírka kontajnera, prvky sa budú zmenšovať podľa ich hodnôt flex-shrink a ich základných veľkostí. Prvok s flex-shrink: 0 sa nebude zmenšovať.

Ako fungujú vlastnosti flex-grow a flex-shrink?