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

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

flex-grow:

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

flex-shrink:

Καθορίζει πόσο θα συρρικνωθεί το στοιχείο αν ο διαθέσιμος χώρος στο flex container είναι μικρότερος από το άθροισμα των βασικών διαστάσεων όλων των flex στοιχείων.
Προεπιλεγμένα flex-shrink: 1, που σημαίνει ότι το στοιχείο μπορεί να συρρικνωθεί.
Τιμή - μη αρνητικός αριθμός.
Όσο μεγαλύτερη η τιμή flex-shrink, τόσο περισσότερο θα συρρικνωθεί το στοιχείο σε σύγκριση με άλλα στοιχεία με μικρότερη τιμή.
Κατά τη συρρίκνωση, λαμβάνεται υπόψη το βασικό πλάτος του στοιχείου (flex-basis ή width).

Παράδειγμα:

.κάδος {
  display: flex;
  width: 500px;
  /* Συνολικό πλάτος του κάδου */
}

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

.αντικείμενο:nth-child(1) {
  flex-grow: 1;
  flex-shrink: 1; /* Προεπιλεγμένες τιμές */
}

.αντικείμενο:nth-child(2) {
  flex-grow: 2;
  flex-shrink: 0; /* Δεν συρρικνώνεται */
}

.αντικείμενο:nth-child(3) {
  flex-grow: 0; /* Δεν μεγαλώνει */
  flex-shrink: 2; /* Συρρικνώνεται περισσότερο */
}

Αν το άθροισμα των βασικών πλάτων (300px) είναι μικρότερο από το πλάτος του κάδου (500px), ο υπόλοιπος χώρος (200px) θα διανεμηθεί μεταξύ του πρώτου και του δεύτερου αντικειμένου σε αναλογία flex-grow 1:2.

Αν το άθροισμα των βασικών πλάτων είναι μεγαλύτερο από το πλάτος του κάδου, τα αντικείμενα θα συρρικνωθούν σύμφωνα με τις τιμές flex-shrink και τα βασικά τους μεγέθη. Το αντικείμενο με flex-shrink: 0 δεν θα συρρικνωθεί.

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