कल मुझे स्कूल में एक वेबसाइट मिली, जो CSS 3 फ्लेक्सबॉक्स स्टेटमेंट का उपयोग करती है। मैंने पहले कभी ऐसा नहीं किया। इसलिए मैंने इसे थोड़ा सा देखा और फ्लेक्सबॉक्स स्टेटमेंट्स की विभिन्न शैलियों को पाया।
कुछ लोग लिखते हैं display: box;, कुछ उपयोग करते हैं display: flexbox;, और अन्य display: flex;।
तो अंतर क्या हैं? जो मुझे उपयोग करना चाहिए?
जवाबों:
ये अलग-अलग स्टाइल हैं।
display: box;2009
display: flexbox;का एक संस्करण है। 2011
display: flex;का एक संस्करण है। वास्तविक संस्करण है।
पॉल आयरिश का उद्धरण
चेतावनी: फ्लेक्सबॉक्स कुछ प्रमुख संशोधनों से गुजरा है, इसलिए यह लेख पुराना है। सारांश में, पुराने मानक (फ्लेक्सबॉक्स 2009) , जिस पर यह लेख आधारित है, को क्रोम में v4, फ़ायरफ़ॉक्स से v2 और IE10 बीटा के बाद से लागू किया गया था।
तब से, नए फ्लेक्सबॉक्स मानक की शुरुआत हुई क्रोम 17 में पदार्पण और शुरुआत की। स्टीफन हे ने नए फ्लेक्सबॉक्स कार्यान्वयन पर एक गाइड लिखा है । तब से, कल्पना ने नामकरण में बदलाव किया जो क्रोम 21 में उतरने लगा। क्रोम 22 में नवीनतम कल्पना का एक स्थिर कार्यान्वयन है।
इस बिंदु पर, या तो लागू करने के अपने जोखिम हैं , इसलिए जागरूक रहें।
यहाँ विभिन्न flexbox स्टेटमेंट के बारे में ब्लॉग है।
यह विभिन्न संस्करणों के बारे में सीएसएस-ट्रिक्स द्वारा एक ब्लॉग प्रविष्टि है।
जब मैं फ्लेक्सबॉक्स का उपयोग करता हूं, तो मैं हमेशा इसे इस तरह लिखता हूं:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
संपादित करें:
अभी भी हर किसी के पास ब्राउज़र / डिवाइस नहीं है जो फ्लेक्सबॉक्स लेआउट को देखने में सक्षम है। तो फ़ॉलबैक समाधान या विकल्प के लिए केनान यूसुफ़ द्वारा यह लेख है कि फ्लेक्सबॉक्स का उपयोग किए बिना फ्लेक्सबॉक्स का उपयोग कैसे करें ।
-webkit-boxपहले आता है। आपकी अंतिम घोषणा हमेशा सबसे हालिया या W3C मानक होनी चाहिए। हालाँकि मैं इसके -ms-flexboxबाद सिफारिश -webkit-flexकरूंगा क्योंकि IE12 / Edge सपोर्ट करता है -webkit-flex, लेकिन आप तकनीकी रूप से IE को इसके -ms-बजाय अपने उचित उपसर्ग का उपयोग करना चाहते हैं -webkit-। यह प्रदर्शन के रूप में हालांकि एक सामान्य सावधानी नाइटपिक है: फ्लेक्स; यहाँ IE12 से प्रभावित नहीं है।
विनिर्देश कई पुनरावृत्तियों के माध्यम से रहा है, 2009 , 2012 , 2013 देखें और हर बार मूल्य बदल दिया गया था।display: flex;नवीनतम है।
यह अभी भी एक मसौदा विनिर्देश है इसलिए कोई भी वर्तमान कार्यान्वयन अभी भी बदल सकता है।