लचीला बॉक्स मॉडल: डिस्प्ले: फ्लेक्स, बॉक्स, फ्लेक्सबॉक्स

CSS3 में लचीले बॉक्स मॉडल की शुरूआत ने हमारे डिजाइन करने के तरीके में क्रांति ला दी है लेआउट हालाँकि, डिस्प्ले प्रॉपर्टी (फ्लेक्स, बॉक्स, फ्लेक्सबॉक्स) के लिए एकाधिक मानों के अस्तित्व से भ्रम पैदा हो सकता है।

अंतरों को समझना

तीन मान अनिवार्य रूप से भिन्न हैं एक ही मॉडल के लिए सिंटैक्स. वे सभी लचीले बॉक्स लेआउट विनिर्देश को लागू करते हैं, जो तत्वों के लेआउट और स्थिति पर बेहतर नियंत्रण प्रदान करता है। हालाँकि, ब्राउज़र समर्थन में कुछ सूक्ष्म अंतर हैं:

• प्रदर्शन: बॉक्स: फ़ायरफ़ॉक्स 2.0 और क्रोम 4.0 में पेश किया गया, समर्थन सीमित है और रैपिंग पूरी तरह से लागू नहीं है।
• प्रदर्शन: फ्लेक्सबॉक्स: क्रोम 17 और इंटरनेट एक्सप्लोरर 10 (उपसर्ग) में उपलब्ध है, इसे चरणबद्ध तरीके से समाप्त कर दिया गया है फ्लेक्स के पक्ष में।
• प्रदर्शन: फ्लेक्स: वर्तमान मानक, क्रोम, फ़ायरफ़ॉक्स, सफारी और इंटरनेट एक्सप्लोरर 11 सहित आधुनिक ब्राउज़रों द्वारा समर्थित।

किस मान का उपयोग करें?

मूल्य का चुनाव ब्राउज़र संगतता आवश्यकताओं पर निर्भर करता है। यदि फ़ायरफ़ॉक्स 2.0 जैसे पुराने ब्राउज़र के लिए समर्थन आवश्यक है, तो आपको डिस्प्ले: बॉक्स का उपयोग करने की आवश्यकता हो सकती है। हालाँकि, सर्वोत्तम अनुकूलता और लचीलेपन के लिए, display: flex अनुशंसित विकल्प है।

नोट:
आम तौर पर फ्लेक्स और बॉक्स दोनों को शामिल करने की सलाह दी जाती है। आपके कोड में गुण, विशेष रूप से पुराने ब्राउज़र को लक्षित करते समय जो फ्लेक्सबॉक्स स्पेक (उदाहरण के लिए, IE10) का समर्थन करते हैं। यह क्रॉस-ब्राउज़र स्थिरता सुनिश्चित करता है।

इन मूल्यों के अंतर और ब्राउज़र समर्थन को समझकर, आप उत्तरदायी और अनुकूलनीय लेआउट बनाने के लिए लचीले बॉक्स मॉडल का प्रभावी ढंग से उपयोग कर सकते हैं।