Ιδιότητα flex-shrink

Η ιδιότητα flex-shrink καθορίζει το πόσο ένα flex-μπλοκ θα μειώνεται σε σχέση με τα γειτονικά στοιχεία μέσα σε ένα flex-εμπόρευμα σε περίπτωση έλλειψης ελεύθερου χώρου.

Για παράδειγμα, εάν όλα τα flex-μπλοκ μέσα σε ένα flex-εμπόρευμα έχουν flex-shrink:1, τότε θα έχουν ίδιο μέγεθος. Εάν ένα από αυτά έχει flex-shrink:2, τότε θα είναι 2 φορές μικρότερο από όλα τα άλλα.

Εφαρμόζεται σε: συγκεκριμένο flex μπλοκ.

Αυτή η ιδιότητα περιλαμβάνεται ως συστατικό μέρος στη συντομογραφία ιδιότητας flex.

Σύνταξη

cssεπιλογέας {
  flex-shrink: θετικός αριθμός;
}

Προεπιλεγμένη τιμή: 1.

Παράδειγμα

Ας υποθέσουμε ότι έχουμε 3 στοιχεία. Το πλάτος του καθενός από αυτά είναι 200px και συνολικά ισούται με 600px, που είναι μεγαλύτερο από το πλάτος του γονικού εμπορεύματος, το οποίο ισούται με 350px:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem2">3</div>
</div>

css.parent {
  display: flex;
  width: 350px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 200px;
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  flex-shrink: 1;
}
.elem2 {
  flex-shrink: 2;
}
.elem3 {
  flex-shrink: 3;
}

Результат:

Ας υπολογίσουμε τον αρνητικό ελεύθερο χώρο με τον τύπο:

Το συνολικό σταθμισμένο πλάτος των στοιχείων λαμβάνοντας υπόψη τις τιμές της ιδιότητας flex-shrink για κάθε στοιχείο θα είναι:

Τώρα ας προσδιορίσουμε πόσο θα συμπιεστεί το πρώτο στοιχείο:

Δεύτερο στοιχείο:

Τρίτο στοιχείο:

Συνεπώς, το τρίτο στοιχείο, του οποίου η τιμή flex-shrink είναι 3 θα συμπιεστεί περισσότερο από τα άλλα στοιχεία.

Δείτε επίσης