Πώς λειτουργούν οι ιδιότητες flex-grow και…

Το flex-grow και το flex-shrink καθορίζουν πώς τα στοιχεία προσαρμόζουν το μέγεθός τους με ευελιξία μέσα στο flex-container, αντίστοιχα όταν υπάρχει ελεύθερος χώρος ή όταν ο χώρος είναι ανεπαρκής.

Το flex-grow - καθορίζει τον συντελεστή με τον οποίο ένα στοιχείο πρέπει να αυξάνεται όταν υπάρχει ελεύθερος χώρος στον κοντέινερ. Η προεπιλεγμένη τιμή είναι 0 (το στοιχείο δεν τεντώνεται). Αν πολλά στοιχεία έχουν flex-grow μεγαλύτερο από 0, ο ελεύθερος χώρος διανέμεται μεταξύ τους αναλογικά με τις τιμές flex-grow.

.item {
  flex-grow: 1; /* Το στοιχείο θα χρησιμοποιήσει όλο τον διαθέσιμο ελεύθερο χώρο */
}

Το flex-shrink - καθορίζει τον συντελεστή με τον οποίο ένα στοιχείο πρέπει να συμπιεστεί όταν ο χώρος στον κοντέινερ είναι ανεπαρκής. Η προεπιλεγμένη τιμή είναι 1 (το στοιχείο συμπιέζεται αναλογικά με άλλα συμπιεζόμενα στοιχεία). Μια τιμή 0 αποτρέπει τη συμπίεση του στοιχείου.

.item {
  flex-shrink: 0; /* Το στοιχείο δεν θα συμπιεστεί */
}

Μαζί με το flex-basis, σχηματίζουν την σύντομη ιδιότητα flex: flex: <flex-grow> <flex-shrink> <flex-basis>.

Παράδειγμα χρήσης:

<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; /* Παράδειγμα σταθερού πλάτους κοντέινερ */
}

.item {
  flex-basis: 100px; /* Βασικό μέγεθος όλων των στοιχείων */
}

.item-1 {
  flex-grow: 1; /* Το Item 1 θα χρησιμοποιήσει τον ελεύθερο χώρο */
}

.item-2 {
  flex-shrink: 0; /* Το Item 2 δεν θα συμπιεστεί */
}

Αν το κοντέινερ είναι πιο φαρδύ από 200px (100px + 100px), το item-1 θα καταλάβει όλο τον υπόλοιπο ελεύθερο χώρο. Αν το κοντέινερ ήδη μετράει 200px, το item-2 θα διατηρήσει το βασικό του μέγεθος των 100px, και το item-1 θα συμπιεστεί.

Πώς λειτουργούν οι ιδιότητες flex-grow και flex-shrink;