फ्लेक्स-ग्रो - सीएसएस-ट्रिक्स

flex-growसंपत्ति लचीला बॉक्स लेआउट मॉड्यूल की एक उप-संपत्ति है।

यदि आवश्यक हो तो यह एक फ्लेक्स आइटम को विकसित करने की क्षमता को परिभाषित करता है। यह एक इकाई रहित मान को स्वीकार करता है जो अनुपात के रूप में कार्य करता है। यह तय करता है कि फ्लेक्स कंटेनर के अंदर उपलब्ध जगह की मात्रा कितनी होनी चाहिए।

उदाहरण के लिए, यदि सभी आइटम flex-grow1 पर सेट हो गए हैं, तो प्रत्येक बच्चा कंटेनर के अंदर एक समान आकार में सेट होगा। यदि आप बच्चों में से किसी एक को 2 मान देते हैं, तो वह बच्चा दूसरों की तुलना में दोगुना स्थान लेगा।

वाक्य - विन्यास

flex-grow: .flex-item ( flex-grow: 2; )

डेमो

निम्न डेमो दिखाता है कि शेष मूल्यों की गणना विभिन्न मूल्यों के अनुसार कैसे की जा रही है flex-grow(बेहतर समझ के लिए कोडपेन पर देखें)।

इस पेन को देखें!

सभी आइटमों flex-growमें 3 को छोड़कर 1 का एक flex-growमूल्य है, जिसका मूल्य 2 है। इसका मतलब है कि जब उपलब्ध स्थान वितरित किया जाता है, तो 3 फ्लेक्स-आइटम में दूसरों की तुलना में दोगुना स्थान होगा।

ब्राउज़र का समर्थन

• (आधुनिक) का अर्थ है विनिर्देश से हाल का वाक्य-विन्यास (जैसे display: flex;)
• (हाइब्रिड) का अर्थ है 2011 से एक विषम अनौपचारिक वाक्यविन्यास (जैसे display: flexbox;)
• (पुराना) का अर्थ है 2009 से पुराना वाक्यविन्यास (जैसे display: box;)

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
21+ (आधुनिक) 20- (पुराना)	3.1+ (पुराना)	2-21 (पुराना) 22+ (नया)	12.1+ (आधुनिक)	10+ (संकर)	2.1+ (पुराना)	3.2+ (पुराना)

ब्लैकबेरी ब्राउज़र 10+ नए सिंटैक्स का समर्थन करता है।

सबसे अच्छा ब्राउज़र समर्थन पाने के लिए वाक्यविन्यास को कैसे मिलाया जाए, इसके बारे में अधिक जानकारी के लिए, कृपया इस लेख (CSS-Tricks) या इस लेख (DevOpera) का संदर्भ लें।