Hogyan működnek a flex-grow és flex-shrink…

A flex-grow és a flex-shrink szabályozza, hogy a flex elemek hogyan osztják el a szabad helyet a flex konténeren belül.

flex-grow:

Meghatározza, hogy a rendelkezésre álló szabad helyből az elem mekkora részt fog elfoglalni, ha van szabad hely.
Alapértelmezett érték flex-grow: 0, ami azt jelenti, hogy az elem nem növekszik.
Érték - nem negatív szám.
Ha több elemnek van flex-grow értéke nagyobb, mint 0, akkor a szabad helyet arányosan osztják el a flex-grow értékek szerint.

flex-shrink:

Meghatározza, hogy az elem mennyire fog összenyomódni, ha a rendelkezésre álló hely a flex konténerben kevesebb, mint az összes flex elem alapméreteinek összege.
Alapértelmezett érték flex-shrink: 1, ami azt jelenti, hogy az elem összenyomódhat.
Érték - nem negatív szám.
Minél nagyobb a flex-shrink értéke, annál erősebben fog az elem összenyomódni a többihez képest.
Az összenyomás során figyelembe veszik az elem alap szélességét (flex-basis vagy width).

Példa:

.konténer {
  display: flex;
  width: 500px;
  /* A konténer össz szélessége */
}

.elem {
  flex-basis: 100px;
  /* Minden elem alap szélessége */
}

.elem:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Alapértelmezett értékek */
}

.elem:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Nem nyomódik össze */
}

.elem:nth-child(3) {
  flex-grow: 0; /* Nem növekszik */
  flex-shrink: 2; /* Erősebben összenyomódik */
}

Ha az alap szélességek összege (300px) kisebb, mint a konténer szélessége (500px), akkor a fennmaradó tér (200px) az első és a második elem között az arány flex-grow 1:2 szerint oszlik szét.

Ha az alap szélességek összege nagyobb, mint a konténer szélessége, akkor az elemek a flex-shrink értékek és az alap méretek szerint lesznek összenyomva. Az flex-shrink: 0 értékű elem nem fog összenyomódni.

Hogyan működnek a flex-grow és flex-shrink tulajdonságok?