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

A flex-grow és a flex-shrink meghatározza, hogy az elemek hogyan alkalmazkodnak rugalmasan a flex-konténeren belül, megfelelően akkor, amikor van szabad hely vagy kevés hely.

A flex-grow - meghatározza az arányt, amellyel egy elem növekedhet, ha a konténerben szabad hely van. Az alapértelmezett érték 0 (az elem nem nyúlik ki). Ha több elemnek flex-grow értéke nagyobb, mint 0, akkor a szabad hely arányosan oszlik el közöttük a flex-grow értékük szerint.

.item {
  flex-grow: 1; /* Az elem az összes rendelkezésre álló szabad helyet felhasználja */
}

A flex-shrink - meghatározza az arányt, amellyel egy elem összehúzódhat, ha a konténerben nincs elég hely. Az alapértelmezett érték 1 (az elem arányosan összehúzódik a többi összehúzódó elemmel). Az érték 0 megakadályozza az elem összehúzódását.

.item {
  flex-shrink: 0; /* Az elem nem fog összehúzódni */
}

Ezekkel együtt a flex-basis-szel alkotják a flex rövidített tulajdonságot: flex: <flex-grow> <flex-shrink> <flex-basis>.

Használati példa:

<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; /* Példa fix szélességű konténerre */
}

.item {
  flex-basis: 100px; /* Az összes elem alapmérete */
}

.item-1 {
  flex-grow: 1; /* Az Item 1 a szabad helyet fogja használni */
}

.item-2 {
  flex-shrink: 0; /* Az Item 2 nem fog összehúzódni */
}

Ha a konténer szélesebb, mint 200px (100px + 100px), az item-1 elfoglalja az összes fennmaradó szabad helyet. Ha a konténer már 200px, az item-2 megtartja az alapméretét 100px, és az item-1 összehúzódik.