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

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

इस के लिए आशुलिपि है flex-grow, flex-shrinkऔर flex-basis। दूसरा और तीसरा पैरामीटर ( flex-shrinkऔर flex-basis) वैकल्पिक हैं।

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

flex: none | ( ? || ) .flex-item ( /* this */ flex: 1 100px; /* is the same as */ flex-grow: 1; flex-basis: 100px; /* and it leaves the flex-shrink property alone, which would be */ flex-shrink: inherit; /* defaults to 1 */ )

यहाँ पर स्कूप है कि आपके द्वारा दिए गए मान कितने मूल्यों पर निर्भर करते हुए मैप करते हैं:

flex: none /* value 'none' case */ flex: /* One value syntax, variation 1 */ flex: /* One value syntax, variation 2 */ flex: /* Two values syntax, variation 1 */ flex: /* Two values syntax, variation 2 */ flex: /* Three values syntax */ flex: inherit

के लिए सामान्य मूल्य flex

फ्लेक्स: 0 ऑटो;

इस रूप में ही है flex: initial;और डिफ़ॉल्ट मान के लिए आशुलिपि: flex: 0 1 auto। यह आइटम को उसके width/ heightगुण (या यदि सेट नहीं किया गया है) के आधार पर आकार देता है ।

जब कुछ खाली जगह बची रहती है तो यह फ्लेक्स आइटम को अनम्य बना देता है, लेकिन पर्याप्त जगह न होने पर इसे अपने न्यूनतम तक सिकुड़ने की अनुमति देता है। संरेखण क्षमताओं या autoमार्जिन का उपयोग मुख्य अक्ष के साथ फ्लेक्स आइटम को संरेखित करने के लिए किया जा सकता है।

फ्लेक्स: ऑटो;

इसके बराबर है flex: 1 1 auto। खबरदार, यह डिफ़ॉल्ट मान नहीं है। यह आइटम को उसके width/ heightगुणों के आधार पर आकार देता है, लेकिन इसे पूरी तरह से लचीला बनाता है ताकि वे मुख्य अक्ष के साथ किसी भी अतिरिक्त स्थान को अवशोषित कर सकें।

सभी आइटम की कर रहे हैं flex: auto, flex: initialया flex: none, आइटम आकार दिया है के बाद किसी भी शेष अंतरिक्ष में समान रूप से साथ आइटम को वितरित किया जाएगा flex: auto।

फ्लेक्स: कोई नहीं;

इसके बराबर है flex: 0 0 auto। यह आइटम को उसके width/ heightगुणों के अनुसार आकार देता है, लेकिन इसे पूरी तरह से अनम्य बनाता है।

यह समान है flex: initialसिवाय इसके कि यह अतिप्रवाह की स्थिति में भी सिकुड़ने की अनुमति नहीं है।

फ्लेक्स:

के बराबर है flex: 1 0px। यह फ्लेक्स आइटम को लचीला बनाता है और फ्लेक्स आधार को शून्य पर सेट करता है, जिसके परिणामस्वरूप एक आइटम है जो शेष स्थान के निर्दिष्ट अनुपात को प्राप्त करता है।

यदि फ्लेक्स कंटेनर में सभी आइटम इस पैटर्न का उपयोग करते हैं, तो उनका आकार निर्दिष्ट फ्लेक्स फैक्टर के समानुपाती होगा।

डेमो

निम्नलिखित डेमो flexसंपत्ति के लिए फ्लेक्सबॉक्स के साथ एक बहुत ही सरल लेआउट दिखाता है :

यहाँ कोड का रहस्योद्घाटन सा है:

.header, .footer ( flex: 1 100%; ) .sidebar ( flex: 1; ) .main ( flex: 2; )

सबसे पहले, हमने फ्लेक्स आइटम को कई पंक्तियों पर प्रदर्शित करने के लिए अधिकृत किया है flex-flow: row wrap।

फिर हम हेडर और फुटर दोनों को वर्तमान व्यूपोर्ट चौड़ाई का 100% लेने के लिए कहते हैं, इससे कोई फर्क नहीं पड़ता।

और मुख्य सामग्री और दोनों साइडबार एक ही पंक्ति को साझा करेंगे, शेष स्थान को निम्नानुसार साझा करेंगे: मुख्य सामग्री के लिए 66% (2 / (1 + 2)), साइडबार के लिए 33% (1 / (1 + 2)) ।

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

• (आधुनिक) का अर्थ है विनिर्देश से हाल का वाक्य-विन्यास (जैसे 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) का संदर्भ लें।