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

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

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

Ας δούμε ένα παράδειγμα:

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

.container {
  display: flex;
  width: 400px; /* Πλάτος του κοντέινερ */
}

.item {
  flex-basis: 100px; /* Βασικό μέγεθος κάθε στοιχείου */
  background-color: lightblue;
  margin: 5px;
}

.item-1 {
  flex-grow: 1; /* Θα καταλάβει 1 μέρος του ελεύθερου χώρου */
  flex-shrink: 0; /* Δεν θα συρρικνωθεί */
}

.item-2 {
  flex-grow: 2; /* Θα καταλάβει 2 μέρη του ελεύθερου χώρου */
  flex-shrink: 1; /* Μπορεί να συρρικνωθεί */
}

.item-3 {
  flex-grow: 1; /* Θα καταλάβει 1 μέρος του ελεύθερου χώρου */
  flex-shrink: 1; /* Μπορεί να συρρικνωθεί */
}

Σε αυτή την περίπτωση, το συνολικό βασικό μέγεθος των στοιχείων είναι 300px (3 * 100px). Ο ελεύθερος χώρος είναι 100px (400px - 300px). Αυτός ο χώρος θα διανεμηθεί μεταξύ των στοιχείων 1, 2 και 3 αναλογικά με τα flex-grow: 1 + 2 + 1 = 4. Το στοιχείο 1 θα λάβει 1/4 * 100px = 25px επιπλέον χώρο. Το στοιχείο 2 θα λάβει 2/4 * 100px = 50px επιπλέον χώρο. Το στοιχείο 3 θα λάβει 1/4 * 100px = 25px επιπλέον χώρο.

Οι τελικές διαστάσεις θα είναι: Στοιχείο 1: 100px + 25px = 125px Στοιχείο 2: 100px + 50px = 150px Στοιχείο 3: 100px + 25px = 125px

Εάν το πλάτος του κοντέινερ ήταν ανεπαρκές (π.χ. 200px), θα χρειαστεί να γίνει συμπίεση. Σε περίπτωση έλλειψης χώρου για συμπίεση, λαμβάνονται υπόψη τα flex-shrink και τα μεγέθη των στοιχείων. Ο ελλείπων χώρος διανέμεται για συμπίεση μεταξύ των στοιχείων με flex-shrink μεγαλύτερο από 0, αναλογικά με το flex-shrink πολλαπλασιασμένο με το τρέχον μέγεθός τους (μετά το flex-basis). Ο αλγόριθμος συμπίεσης είναι λίγο πιο πολύπλοκος, αλλά η βασική ιδέα είναι ότι τα στοιχεία με μεγαλύτερο flex-shrink ή μεγαλύτερο τρέχον μέγεθος θα συμπιεστούν περισσότερο.

Είναι σημαντικό να θυμόμαστε ότι τα flex-basis, flex-grow και flex-shrink συχνά χρησιμοποιούνται μαζί ως η σύντομη ιδιότητα flex. Για παράδειγμα, flex: 1 1 auto; ισοδυναμεί με flex-grow: 1; flex-shrink: 1; flex-basis: auto;.

Προτεραιότητα στην κατανομή του χώρου:

flex-basis: Ορίζει το αρχικό μέγεθος του στοιχείου.
flex-grow: Κατανέμει τον θετικό ελεύθερο χώρο.
flex-shrink: Κατανέμει τον αρνητικό ελεύθερο χώρο (ανάγκη συμπίεσης).

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