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

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

यह मुख्य अक्ष को स्थापित करता है, इस प्रकार दिशा फ्लेक्स आइटम को फ्लेक्स कंटेनर में रखा जाता है।

अनुस्मारक: एक फ्लेक्स कंटेनर का मुख्य अक्ष प्राथमिक अक्ष है जिसके साथ फ्लेक्स आइटम बाहर रखे जाते हैं। खबरदार, यह जरूरी नहीं कि क्षैतिज हो; यह flex-directionसंपत्ति पर निर्भर करता है ।

flex-directionसंपत्ति 4 अलग-अलग मान स्वीकार करता है:

row( डिफ़ॉल्ट ): पाठ दिशा के समान
row-reverse: पाठ दिशा के विपरीत
column: के रूप में ही rowलेकिन ऊपर से नीचे
column-reverse: row-reverseऊपर से नीचे तक समान

ध्यान दें कि rowऔर row-reverseफ्लेक्स कंटेनर की दिशात्मकता से प्रभावित हैं। यदि इसकी पाठ दिशा है ltr, rowक्षैतिज अक्ष को बाईं ओर से दाईं ओर और दाईं से बाईं ओर उन्मुख का प्रतिनिधित्व करता है row-reverse; यदि दिशा है rtl, तो यह विपरीत है।

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

flex-direction: row | row-reverse | column | column-reverse .flex-container ( flex-direction: row; )

डेमो

निम्नलिखित डेमो में:

लाल सूची में सेट किया गया है row
पीली सूची पर सेट है row-reverse
के लिए ब्लू सूची निर्धारित है column
के लिए ग्रीन सूची निर्धारित है column-reverse

नोट: पाठ दिशा संपादित नहीं की गई है।

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

तो मूल रूप से, आप rowज्यादातर मामलों में, या columnकुछ परिस्थितियों में उपयोग करेंगे । अन्यथा, दिशा निर्देश को उल्टा करना बहुत असामान्य है।

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

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