Hogyan lehet rugalmasan módosítani a flexboxot…

A flexbox elemeinek méretét rugalmasan módosíthatja a flex-grow, flex-shrink és flex-basis tulajdonságok segítségével.

flex-grow: Meghatározza, hogy egy elem mennyire tud nyúlni, kitöltve a szabad helyet a konténerben. Az alapértelmezett érték 0 (nem nyúlik). Egy magasabb érték nagyobb nyúlási tényezőt jelent a többi elemhez képest.
flex-shrink: Meghatározza, hogy egy elem mennyire tud összemenni, ha hiányzik a szabad hely. Az alapértelmezett érték 1 (összehúzódik). Egy magasabb érték nagyobb összenyomási tényezőt jelent.
flex-basis: Meghatározza az elem alapméretét a szabad hely elosztása előtt. Lehet fix érték (px, %, rem) vagy kulcsszó (auto, content).

Ezek a három tulajdonság gyakran kombinálva vannak a flex rövid tulajdonságban: flex: <flex-grow> <flex-shrink> <flex-basis>;.

Használati példák:

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

/* Az elem nem fog összemenni hiányzó hely esetén */
.flex-item {
  flex-shrink: 0;
}

/* Az elem alapmérete 100px, és ha van hely, akkor bővül */
.flex-item {
  flex: 1 1 100px;
}

/* Az elem alapmérete a tartalom által meghatározott, és összehúzható */
.flex-item {
  flex: 0 1 auto; /* Egyenértékű a `flex: initial;`-lal */
}

/* Az elem nem nyúlik, nem húzódik össze, és alapmérete a tartalom által meghatározott */
.flex-item {
  flex: 0 0 auto; /* Egyenértékű a `flex: none;`-lal */
}

/* Az elem nyúlik, összehúzódik, és alapmérete 0 (hasznos azonos szélességű elemek létrehozásához) */
.flex-item {
  flex: 1 1 0; /* Egyenértékű a `flex: auto;`-val */
}

Ezeknek a tulajdonságoknak a használatával pontosan szabályozhatja az elemek viselkedését egy flex-konténeren belül, amikor a képernyő vagy a tartalom mérete változik.

Hogyan lehet rugalmasan módosítani a flexboxot használó elemek méretét?