CSS flex-direction गुण

वर्णन और उपयोग

flex-direction प्रोपर्टी फ्लैक्स एलिमेंट्स की दिशा निर्धारित करती है।

टिप्पणी：यदि एलिमेंट एक फ्लैक्सबल प्रोजेक्ट नहीं है, तो फ्लैक्स प्रोपर्टी अवैध है।

और देखें:

CSS शिक्षा:CSS फ्लेक्स बॉक्स

CSS संदर्भ दस्तावेज़:flex गुण

CSS संदर्भ दस्तावेज़:flex-basis गुण

CSS संदर्भ दस्तावेज़:flex-flow गुण

CSS संदर्भ दस्तावेज़:flex-grow गुण

CSS संदर्भ दस्तावेज़:flex-shrink गुण

CSS संदर्भ दस्तावेज़:flex-wrap गुण

HTML DOM संदर्भ दस्तावेज़:flexDirection गुण

इस्तेमाल

डाव एलेमेंट के अंदर फ्लेक्स एलेमेंट की दिशा को विपरीत रूप से सेट करें:

div {
  display: flex;
  flex-direction: row-reverse; 
}

खुद अभिप्राय करें

CSS ग्रामरा

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

गुण मूल्य

मूल्य वर्णन
row डिफ़ॉल्ट वैल्यू। एक पट्टी के रूप में, अनुक्रमित रूप से एलेमेंट दिखाएं।
row-reverse समान पट्टी लेआउट लेकिन विपरीत दिशा में。
column स्तम्भ के रूप में, अनुक्रमित रूप से एलेमेंट दिखाएं।
column-reverse समान स्तम्भ लेआउट लेकिन विपरीत दिशा में。
initial इस गुण को उसके डिफ़ॉल्ट वैल्यू पर सेट करें। देखें: initial。
inherit इस गुण को उसके पिता एलेमेंट से विरासत करें। देखें: inherit。

तकनीकी विवरण

डिफ़ॉल्ट वैल्यू: row
विरासत: नहीं
एनिमेशन बनाना: समर्थित नहीं है। देखें:एनिमेशन संबंधी गुण。
संस्करण: CSS3
जेसक्रिप्ट ग्रामरा: object.style.flexDirection="column-reverse"

और इस्तेमाल

flex-direction और मीडिया क्वेरी को संयुक्त रूप से इस्तेमाल करके विभिन्न स्क्रीन आकार/डिवाइस के लिए अलग-अलग लेआउट बनाएं:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* प्रतिसादी लेआउट - दो स्तम्भ लेआउट (50％) के बजाय एक स्तम्भ लेआउट (100％) बनाएं */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

खुद अभिप्राय करें

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

तालिका में नंबर इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र संस्करण को दर्शाते हैं।

सफ़ेद -webkit- या -moz- के साथ नंबर इस्तेमाल करने वाला पहला संस्करण है।

च्रोम IE / एज फायरफॉक्स सफारी ओपेरा
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0