Ενότητα CSS flex-shrink

Ορισμός και χρήση

Η ιδιότητα flex-shrink είναι σταθερή στον ίδιο κουτί, η συστολή του αντικειμένου σε σχέση με τα υπόλοιπα ελαστικά αντικείμενα.

Σημειώσεις:Αν το στοιχείο δεν είναι αντικείμενο ελαστικό, η ιδιότητα flex είναι μη έγκυρη.

Επίσης δείτε:

Εκμάθηση CSS: Ελαστικό πλαίσιο CSS

Εγχειρίδιο CSS:Ιδιότητα flex

Εγχειρίδιο CSS:Ιδιότητα flex-basis

Εγχειρίδιο CSS:Ιδιότητα flex-direction

Εγχειρίδιο CSS:Ιδιότητα flex-flow

Εγχειρίδιο CSS:Ιδιότητα flex-grow

Εγχειρίδιο CSS:Ιδιότητα flex-wrap

Εγχειρίδιο HTML DOM:Ιδιότητα flexShrink

Παράδειγμα

Παράγει την δεύτερη ελαστική μονάδα να συστέλλεται τριπλάσια σε σχέση με τα υπόλοιπα αντικείμενα:

div:nth-of-type(2) {
  flex-shrink: 3;
}

Δοκιμάστε το個人τικά

Γλώσσα σύνταξης CSS

flex-shrink: number|initial|inherit;

Τιμή ιδιότητας

Τιμή Περιγραφή
number Αριθμός, ορίζει τη συστολή του αντικειμένου σε σχέση με τα υπόλοιπα ελαστικά αντικείμενα. Η προεπιλεγμένη τιμή είναι 1.
initial Ρυθμίζει αυτή την ιδιότητα στην προεπιλεγμένη τιμή. Δείτε επίσης initial.
inherit Αναδιαμορφώνει αυτή την ιδιότητα από το γονικό στοιχείο. Δείτε επίσης inherit.

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: 1
Προγενέστερη τιμή: Όχι
Παραγωγή animation: Υποστηρίζεται. Δείτε επίσης:Ιδιότητες animation.
Έκδοση: CSS3
Γλώσσα σύνταξης JavaScript: object.style.flexShrink="5"

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

Τα αριθμητικά στην τаблицή σηματοδοτούν την πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως την ιδιότητα.

Τα αριθμητικά που περιλαμβάνονται με -webkit- ή -moz- δείχνουν την πρώτη έκδοση που χρησιμοποιεί πρόθεμα.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0