Η flex-growιδιότητα είναι δευτερεύουσα ιδιοκτησία της μονάδας Flexible Box Layout.
Καθορίζει την ικανότητα ανάπτυξης ενός εύκαμπτου αντικειμένου εάν είναι απαραίτητο. Αποδέχεται μια τιμή χωρίς μονάδα που χρησιμεύει ως αναλογία. Επιβάλλει το ποσό του διαθέσιμου χώρου στο εσωτερικό του δοχείου flex που πρέπει να καταλάβει το αντικείμενο.
Για παράδειγμα, εάν όλα τα στοιχεία έχουν flex-growοριστεί σε 1, κάθε παιδί θα έχει ίσο μέγεθος μέσα στο δοχείο. Εάν επρόκειτο να δώσετε σε ένα από τα παιδιά αξία 2, αυτό το παιδί θα καταλάμβανε διπλάσιο χώρο από τα άλλα.
Σύνταξη
flex-grow: .flex-item ( flex-grow: 2; )Διαδήλωση
Η παρακάτω επίδειξη δείχνει τον τρόπο υπολογισμού του υπολειπόμενου χώρου σύμφωνα με τις διαφορετικές τιμές του flex-grow(ανατρέξτε στο CodePen για καλύτερη κατανόηση).
Όλα τα στοιχεία έχουν flex-growτιμή 1 εκτός από το 3ο που έχει flex-growτιμή 2. Αυτό σημαίνει ότι όταν διατίθεται ο διαθέσιμος χώρος, το 3ο στοιχείο flex θα έχει διπλάσιο χώρο από άλλα.
Υποστήριξη προγράμματος περιήγησης
- (σύγχρονο) σημαίνει την πρόσφατη σύνταξη από την προδιαγραφή (π.χ.
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).