ये तीन प्रॉपर्टीज़ flex items पर नियंत्रण करती हैं कि वे मुख्य अक्ष के साथ स्पेस कैसे साझा करती हैं। शॉर्टहैंड flex उन्हें जोड़ता है।
css
.item { : ; }
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 को "आइटम बस वहां बैठते हैं" से सटीक, प्रतिक्रियाशील नियंत्रण में बदल देता है।