Ευέλικτη συρρίκνωση - CSS-Κόλπα

Anonim

Η flex-shrinkιδιότητα είναι δευτερεύουσα ιδιοκτησία της μονάδας Flexible Box Layout.

Καθορίζει τον "συντελεστή flex shrink", ο οποίος καθορίζει πόσο θα συρρικνωθεί το flex στοιχείο σε σχέση με τα υπόλοιπα στοιχεία flex στο δοχείο flex όταν δεν υπάρχει αρκετός χώρος στη σειρά.

Όταν παραλειφθεί, ρυθμίζεται 1και ο συντελεστής εύκαμπτης συρρίκνωσης πολλαπλασιάζεται με τη βάση ευέλικτης κατά τη διανομή αρνητικού χώρου

Σύνταξη

flex-shrink: .flex-item ( flex-shrink: 2; )

Διαδήλωση

Για να δείτε όλες τις δυνατότητες αυτής της επίδειξης, θα πρέπει να μπορείτε να αλλάξετε το μέγεθος του πλάτους του, οπότε παρακαλώ ρίξτε μια ματιά στο CodePen απευθείας.

Δείτε αυτό το στυλό!

Σε αυτό το demo:

  • Το πρώτο στοιχείο έχει flex: 1 1 20em(συντομογραφία για flex-grow: 1, flex-shrink: 1, flex-basis: 20em)
  • Το δεύτερο στοιχείο έχει flex: 2 2 20em(συντομογραφία για flex-grow: 2, flex-shrink: 2, flex-basis: 20em)

Και τα δύο είδη flex θέλουν να έχουν πλάτος 20em. Λόγω του flex-grow (πρώτη παράμετρος), εάν το δοχείο flex είναι μεγαλύτερο από 40em, το 2ο παιδί θα πάρει διπλάσιο χώρο που απομένει από το πρώτο παιδί. Αλλά αν το γονικό στοιχείο έχει πλάτος μικρότερο από 40em, τότε το 2ο παιδί θα έχει ξυριστεί διπλάσιο από το 1ο παιδί, κάνοντάς το να φαίνεται μικρότερο (λόγω της 2ης παραμέτρου, flex-shrink).

Υποστήριξη προγράμματος περιήγησης

  • (σύγχρονο) σημαίνει την πρόσφατη σύνταξη από την προδιαγραφή (π.χ. display: flex;)
  • (υβριδικό) σημαίνει μια περίεργη ανεπίσημη σύνταξη από το 2011 (π.χ. display: flexbox;)
  • (παλιά) σημαίνει την παλιά σύνταξη από το 2009 (π.χ. display: box;)
Χρώμιο Σαφάρι Firefox ΛΥΡΙΚΗ ΣΚΗΝΗ ΙΕ Android iOS
21+ (μοντέρνα)
20- (παλιά)		 3.1+ (παλιά) 2-21 (παλιά)
22+ (νέα)		 12.1+ (μοντέρνο) 10+ (υβριδικό) 2.1+ (παλιά) 3.2+ (παλιά)

Το πρόγραμμα περιήγησης Blackberry 10+ υποστηρίζει τη νέα σύνταξη.

Για περισσότερες πληροφορίες σχετικά με το πώς να συνδυάσετε σύνταξη προκειμένου να λάβετε την καλύτερη υποστήριξη προγράμματος περιήγησης, ανατρέξτε σε αυτό το άρθρο (CSS-Tricks) ή σε αυτό το άρθρο (DevOpera).