यो तीनवटा गुणहरू flex items मा काम गरी मुख्य अक्षको साथ स्थान साझेदारी कसरी गर्ने भनेर नियन्त्रण गर्छन्। flex shorthand यिनलाई जोडेर दिन्छ।
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 layouts मा आनुपातिक आकार नियन्त्रण गर्नु भनेर — बराबरको स्तम्भहरू (flex: 1), निश्चित-प्लस-तरल प्यानलहरू (flex: 0 0 X + flex: 1), र अनचाहेको सिकुडाइबाट बचाउँदै (flex-shrink: 0)।
आधार/वृद्धि/सिकुडाइ बुझ्नु Flexbox लाई "आइटमहरू यहाँ बस बस्छन्" बाट सटीक, प्रतिक्रियाशील नियन्त्रणमा परिणत गर्छ।