Αυτές οι τρεις ιδιότητες σε flex items ελέγχουν πώς μοιράζονται τον χώρο κατά μήκος του κύριου άξονα. Η συντομογραφία flex τα συνδυάζει.
css
{ : ; }
flex-basis — το ιδανικό/αρχικό μέγεθος του στοιχείου στον κύριο άξονα (όπως width για μια σειρά). auto χρησιμοποιεί το μέγεθος του περιεχομένου.flex-grow — εάν υπάρχει επιπλέον χώρος, πόσο άπληστα επεκτείνεται αυτό το στοιχείο. 0 = μην αναπτύσσεστε; υψηλότεροι αριθμοί αναπτύσσονται ανάλογα.flex-shrink — εάν δεν υπάρχει αρκετός χώρος, πόσο έτοιμα συρρικνώνεται αυτό το στοιχείο. 0 = ποτέ μην συρρικνώνεστε (μπορεί να προκαλέσει υπερχείλιση); προεπιλογή 1 = συρρικνώνεται ως απαιτείται..a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
Ο επιπλέον χώρος διαιρείται στην αναλογία των τιμών ανάπτυξης, όχι των απόλυτων μεγεθών.
.item { flex: 1; } /* = 1 1 0 → all items share space EQUALLY (equal widths) */
.item { flex: auto; } /* = 1 1 auto → grow/shrink based on CONTENT size */
.item { flex: none; } /* = 0 0 auto → fixed size, never grow or shrink */
.sidebar { flex: 0 0 250px; } /* fixed 250px sidebar that never flexes */
flex: 1 σε κάθε στοιχείο δημιουργεί ίσες στήλες. flex: 0 0 250px δημιουργεί ένα άκαμπτο σταθερού πλάτους πάνελ δίπλα σε ένα ευέλικτο.
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; } /* takes all remaining space */
Αυτές οι ιδιότητες είναι ο τρόπος με τον οποίο ελέγχετε το ανάλογο μέγεθος στις διατάξεις flex — ίσες στήλες (flex: 1), σταθερές συν ρευστές πάνελ (flex: 0 0 X + flex: 1) και αποφυγή ανεπιθύμητης συρρίκνωσης (flex-shrink: 0).
Η κατανόηση του basis/grow/shrink μετατρέπει το Flexbox από "τα στοιχεία κάθονται εκεί" σε ακριβή, ανταποκρινόμενο έλεγχο.