CSS flex-grow attribute

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

Το χαρακτηριστικό flex-grow ορίζει την ποσότητα αύξησης του στοιχείου σε σχέση με τα υπόλοιπα ελαστικά στοιχεία εντός του ίδιου κουτιού.

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

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

Εκμάθηση CSS: Ελαστική σckeίση CSS

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

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

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

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

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

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

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

Παράδειγμα

Προσθέστε ώστε το πλάτος του δεύτερου ελαστικού στοιχείου να είναι τριπλάσιο από το των υπόλοιπων ελαστικών στοιχείων:

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

Δοκιμάστε το προσωπικά

Γλώσσα CSS

flex-grow: number|initial|inherit;

Τιμή χαρακτηριστικού

Τιμή Περιγραφή
number Αριθμητική τιμή, ορίζει την ποσότητα αύξησης του στοιχείου σε σχέση με τα υπόλοιπα ελαστικά στοιχεία. Η προεπιλεγμένη τιμή είναι 0.
initial Θέστε αυτό το χαρακτηριστικό στη προεπιλεγμένη τιμή του. Δείτε: initial.
inherit Κληρονομείται αυτό το χαρακτηριστικό από το γονικό στοιχείο. Δείτε: inherit.

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

Προεπιλεγμένη τιμή: 0
Κληρονομικότητα: Όχι
Προσαρμογή κινούμενων εικόνων: Υποστηρίζεται. Δείτε:Πρότυπα σχεδιασμού κινούμενων εικόνων.
Έκδοση: CSS3
Γλώσσα JavaScript: object.style.flexGrow="5"

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

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

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

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