दिलचस्प पोस्ट
सुरक्षित सत्र कुकी के साथ HTTP और HTTPS पृष्ठों के बीच स्विच करना वापसी प्रकार ओवरलोडिंग का उपयोग करना वास्तव में असंभव है? जांचें कि क्या सरणी में JavaScript के किसी अन्य तत्व का कोई भी तत्व है 5 सितारा रेटिंग के आधार पर सॉर्ट करने का एक बेहतर तरीका क्या है? 0 – 100 के बीच प्रधान संख्याओं को कैसे ढूंढें? दूसरी टेक्स्ट फ़ाइल के आधार पर टेक्स्ट फ़ाइल से डुप्लिकेट निकालें LINQ का उपयोग कर संग्रह में सभी ऑब्जेक्ट्स को अपडेट करें dtype दशमलव के साथ numpy array? एक क्रॉसवर्ड उत्पन्न करने के लिए एल्गोरिथ्म PHP पर upload_max_filesize बदलना अनावश्यक संस्मरण को रोकने के लिए डबल स्ट्रीम फीड? मैं ActiveRecord में डिफ़ॉल्ट मान कैसे सेट करूं? कैसे सैकुली हेडलेस मोड में काम कर सकता है गतिशील रूप से लोड हो रहा है सीएसएस स्टाइलशीट IE पर काम नहीं करता है पिछले फ़ंक्शन के पूरा होने के बाद फ़ंक्शन को कॉल करें

लचीले बॉक्स मॉडल – प्रदर्शन: फ्लेक्स, बॉक्स, फ्लेक्सबॉक्स?

हम में से बहुत से लोग जानते हैं कि inline और block जैसी display प्रॉपर्टी के पुराने मूल्यों को पुराना है क्योंकि नए लचीले बॉक्स मॉडल को CSS3 में पेश किया गया है। लेकिन, हम एक ही लचीले बॉक्स मॉडल में वेब पर अलग-अलग जानकारी पा सकते हैं।

हमें display संपत्ति के मुख्य रूप से 3 अलग-अलग मान मिल सकते हैं, जैसे flex , box और flexbox । इन तीन लचीले बॉक्स मॉडल के बीच अंतर क्या है और कौन सी एक का उपयोग करता है?

वेब के समाधान से एकत्रित समाधान "लचीले बॉक्स मॉडल – प्रदर्शन: फ्लेक्स, बॉक्स, फ्लेक्सबॉक्स?"

आप जिन ब्राउज़र्स को समर्थन देने की आवश्यकता है उनके लिए आप जो भी चाहते हैं उसका उपयोग करें।

display: box

  • फ़ायरफ़ॉक्स 2.0? (पहले से जुड़ा हुआ)
  • क्रोम 4.0? (पहले से जुड़ा हुआ)
  • सफ़ारी / आईओएस 3.1? (पहले से जुड़ा हुआ)
  • एंड्रॉइड 2.1 (उपसर्ग)

जहां तक ​​मैं बता सकता हूं, box-lines: multiple माध्यम से लपेटकर box-lines: multiple किसी भी ब्राउज़र में कार्यान्वित नहीं होता है।

display: flexbox

  • क्रोम 17- ?? (पहले से जुड़ा हुआ)
  • इंटरनेट एक्सप्लोरर 10 (उपसर्ग)

प्रदर्शन: फ्लेक्स – वर्तमान मानक

  • क्रोम 21 (प्रीफ़िक्स्ड), 2 9 (अप्रूफिक्स)
  • ओपेरा 12.1 (अप्रचिक्षित), 15 (वेबकिट उपसर्ग)
  • फ़ायरफ़ॉक्स 22 (अप्रूफिक्स)
  • सफ़ारी / आईओएस 7 (प्रीफिक्स)
  • ब्लैकबेरी 10 (उपसर्ग)
  • इंटरनेट एक्सप्लोरर 11 (अप्रूफिक्स)

http://caniuse.com/#feat=flexbox (ध्यान दें कि आईई 10 केवल आंशिक समर्थन के रूप में चिह्नित ब्राउज़र है जो रैपिंग का समर्थन करता है)

flexbox और flex लिए चश्मा पर्याप्त समान हैं, दोनों में शामिल करने का कोई कारण नहीं है, खासकर जब से flexbox केवल flexbox स्पेक का समर्थन करता है। box लिए विवरण बहुत अलग है और इसके बाद भी आप इसके प्रभाव के आधार पर लायक नहीं हो सकते हैं, भले ही लगभग सभी गुणों में flexbox / flex चश्मा में पाए जाने वाले एनालॉग होते हैं

आपको मिल सकता है कि कुछ ब्राउज़र्स जो एकाधिक ऐप का समर्थन करते हैं संभावना है कि एक समय आ जाएगा जहां वे पुरानी कल्पना के लिए समर्थन छोड़ देंगे, इसलिए हमेशा सुनिश्चित करें कि आप flex गुणों को शामिल करते हैं

जहां तक ​​मुझे पता है, लचीला बॉक्स मॉडल के ऊपर तीन अलग-अलग संस्करणों को उनकी उम्र से वर्गीकृत किया जा सकता है

  1. display: box – यह पहला लचीला बॉक्स मॉडल था जिसे 200 9 के आसपास के नए मॉडल के रूप में स्वीकार किया गया था। इसका उपयोग न करें

  2. display: flexbox – यह लचीला बॉक्स मॉडल 2011 में आया था, जो अभी भी उसके विकास में था। इसका उपयोग न करें

  3. display: flex – यह नवीनतम लचीला बॉक्स मॉडल है जिसे वर्तमान में नवीनतम बॉक्स मानक के रूप में इसकी जगह मिलती है। इससे आगे कुछ बदलाव आ सकते हैं लेकिन यह अन्य दो मानकों को पसंद किया गया है।