IE9 के लिए फ्लेक्सबॉक्स वैकल्पिक

आधुनिक ब्राउज़र फ्लेक्सबॉक्स सीएसएस मॉडल पेश करते हैं, जो तत्वों को वितरित और संरेखित करने का एक कुशल तरीका प्रदान करते हैं। हालाँकि, IE9 में फ्लेक्सबॉक्स समर्थन का अभाव है।

IE10 के लिए निम्नलिखित कार्यान्वयन पर विचार करें:

div#navContainer {
    display: flex; // Modern browsers
    display: -ms-flexbox; // IE10
}

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

.container {
    display: flex;
}

.no-flexbox .container {
    display: table-cell;
}

आगे के मार्गदर्शन के लिए ज़ो गिलेनवाटर की प्रस्तुतियाँ देखें:

• फ्लेक्सबॉक्स के साथ लेवलिंग:

  • क्षैतिज नेविगेशन रिक्ति: प्रदर्शन: इनलाइन- ब्लॉक;
  • फ्लेक्सबॉक्स के बिना तत्वों को पिन करना: डिस्प्ले: टेबल-सेल;
  • फ़ॉर्म फ़ॉलबैक को संरेखित करना
  • फ्लेक्स ऑर्डर के साथ और उसके बिना उदाहरण

• CSS3 लेआउट:

  • फ्लेक्सबॉक्स के साथ इनलाइन-ब्लॉक का उपयोग करना: क्षैतिज रूप
  • फ्लेक्सबॉक्स के साथ इनलाइन-ब्लॉक का उपयोग करना: क्षैतिज नेविगेशन

याद रखें:

• IE10 के लिए ब्राउज़र समर्थन विश्वसनीय है।
• ऑटोप्रिफ़िक्सर ब्राउज़र उपसर्गों को संभालता है।
• Modernizr फ़ॉलबैक प्रदान करता है।
• फ्लेक्सबॉक्स को अपनाना विशिष्ट नहीं है।