फ्लेक्सबॉक्स उदाहरण

मैं फ्लेक्सबॉक्स सीएसएस तकनीक की सुविधाओं पर राहेल एंड्रयू द्वारा लेख प्रकाशित करना जारी रखता हूं

श्रृंखला में पिछले लेख:

1. फ्लेक्सबॉक्स कंटेनर बनाते समय क्या होता है ।
2. आप सभी को Flexbox में संरेखण के बारे में जानना चाहिए ।
3. फ्लेक्सबॉक्स: यह लचीला बॉक्स कितना बड़ा है? ।

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

इससे पहले इस श्रृंखला में

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

क्या मुझे ग्रिड या फ्लेक्सबॉक्स का उपयोग करना चाहिए?

यह अभी भी मुख्य प्रश्न है जो मुझे लेआउट में प्रशिक्षण के दौरान पूछा जाता है, और सामान्य तौर पर मेरा मानना ​​है कि जैसे-जैसे लोग नए तरीकों के साथ काम करने के लिए अधिक से अधिक अभ्यस्त हो जाते हैं, यह एक सवाल बन जाता है जिसे आपको खुद से कम बार पूछने की आवश्यकता होती है। जैसा कि अनुभव बढ़ता है, आप समझेंगे कि किस लेआउट पद्धति का उपयोग करना है।

हालाँकि, यदि आप अभी इस विचार को समझना शुरू कर रहे हैं, तो याद रखें कि सीएसएस ग्रिड लेआउट और फ्लेक्सबॉक्स दोनों सीएसएस हैं। यदि आपने display: grid या display: flex निर्दिष्ट किया है, तो आप अक्सर अंतर की तुलना में सामान्य रूप से अधिक उपयोग करते हैं। ग्रिड और फ्लेक्सबॉक्स दोनों संपत्तियों का उपयोग करते हैं जो बॉक्स संरेखण विनिर्देश का हिस्सा हैं; दोनों Intrinsic और Extrinsic Sizing CSS विनिर्देश में विस्तृत अवधारणाओं पर आधारित हैं । ।

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

इसलिए, हम Vue.js और React , बूटस्ट्रैप या फाउंडेशन के बीच चयन नहीं करते हैं। हम लेआउट को पूरा करने के लिए सीएसएस का उपयोग करते हैं, और हमें सीएसएस कणों का उपयोग करने की आवश्यकता होती है जो हमारे डिजाइन के विशिष्ट भाग के लिए सबसे अधिक समझ में आता है। प्रत्येक घटक की समीक्षा करें और तय करें कि इसके लिए सबसे अच्छा क्या है, या तत्वों का कौन सा संयोजन इसके लिए सबसे अच्छा है।

यह एक ग्रिड हो सकता है, या यह एक फ्लेक्सबॉक्स हो सकता है। यह एक बाहरी ग्रिड कंटेनर हो सकता है जिसमें कुछ ग्रिड तत्व लचीले या प्रतिवर्ती हो जाते हैं। यदि आपकी परियोजना के लिए आवश्यक है तो फ्लेक्स तत्व को नेस्ट करने में कोई समस्या नहीं है।

फ्लेक्सबॉक्स वास्तव में क्या है?

फ्लेक्सबॉक्स विनिर्देश लेआउट विधि का वर्णन इस प्रकार है:

" फ्लेक्स लेआउट ब्लॉक लेआउट की तरह दिखता है। इसमें कई अधिक जटिल पाठ या दस्तावेज़-उन्मुख गुणों का अभाव होता है, जिनका उपयोग ब्लॉक लेआउट में किया जा सकता है, जैसे कि फ़्लोट्स और कॉलम । इसके बजाय, यह एक तरह से अंतरिक्ष आवंटन और सामग्री संरेखण के लिए सरल और शक्तिशाली उपकरण प्राप्त करता है, कौन से वेब एप्लिकेशन और जटिल वेब पेज लंबे समय से आवश्यक हैं। ”

मुझे लगता है कि यहां प्रमुख वाक्यांश "अंतरिक्ष आवंटन और सामग्री संरेखण" है। फ्लेक्सबॉक्स सभी वस्तुओं का एक गुच्छा (जिसमें अलग-अलग आकार होते हैं) और उन्हें एक कंटेनर में रखना (जो स्वयं चर आकार का हो सकता है)। फ्लेक्सबॉक्स नरम है। वह हमारे तत्वों के लिए सबसे अच्छा लेआउट बनाने की कोशिश करता है, बड़े तत्वों को अधिक स्थान देता है और छोटे तत्वों को कम जगह देता है, जिससे सामग्री की पठनीयता का संरक्षण होता है।

अगर लोगों को फ्लेक्सबॉक्स जटिल और गूढ़ लगता है, तो ऐसा अक्सर होता है क्योंकि वे फ्लेक्सबॉक्स को ग्रिड सिस्टम के रूप में उपयोग करने की कोशिश करते हैं, जो अंतरिक्ष के आकार और वितरण पर नियंत्रण पाने की कोशिश करते हैं। जब आप ऐसा करते हैं, तो फ्लेक्सबॉक्स अजीब और जटिल लग सकता है, जैसा कि आप फ्लेक्सबॉक्स क्या करता है, के साथ संघर्ष करते हैं, अर्थात्। अपने अंतर्निहित लचीलेपन के साथ।

इसलिए, लचीले लेआउट के लिए बहुत अच्छी तरह से अनुकूल टेम्पलेट वे हैं जिनमें हम प्रत्येक तत्व के लिए सही आकार होने में इतनी रुचि नहीं रखते हैं। हम बस चाहते हैं कि ये तत्व एक-दूसरे के बगल में दिखाई दें।

ऐसे पैटर्न भी हैं जिनमें आप लाइन ब्रेक करना चाहते हैं, हालांकि आपको सख्त ग्रिड की आवश्यकता नहीं है। यदि हम मूल ग्रिड बनाम फ्लेक्सबॉक्स उदाहरण लेते हैं , जहां हम ग्रिड में दोहराए गए ऑटो-फिल सिंटैक्स का उपयोग करते हैं, और फिर लाइन-रैपिंग फ्लेक्स कंटेनर, हम तुरंत दो तरीकों के बीच अंतर देखेंगे।

ग्रिड उदाहरण में, ग्रिड तत्वों को पंक्तियों और स्तंभों में व्यवस्थित किया जाता है। जब एक ट्रैक के कॉलम की संख्या (अंतरिक्ष के आधार पर) बदलती है, तो तत्व हमेशा अगले उपलब्ध ग्रिड सेल पर जाते हैं। वास्तव में, एक ग्रिड तत्व को ऑटो-फ्लो परिदृश्य में भरने के लिए एक ट्रैक को घेरने का अनुरोध करने का कोई तरीका नहीं है अगर अन्य खाली कोशिकाएं हैं।

फ्लेक्स उदाहरण में, परिणामी तत्व उनके बीच बचे स्थान को अलग करते हैं, इसलिए हम क्षैतिज और ऊर्ध्वाधर संरेखण का उपयोग नहीं करते हैं।

यदि हमारे पास ऑटो के लिए फ्लेक्स-बेस सेट है, और किसी भी फ्लेक्स-एलिमेंट्स को बढ़ाया जाता है, तो बाकी को अतिरिक्त स्थान भी प्रदान किया जाएगा ताकि संरेखण लाइन से लाइन तक अलग हो सके।

यह एक बहुत ही ज्वलंत उदाहरण है जहां हम ग्रिड लेआउट पर फ्लेक्सबॉक्स का उपयोग करना चाहते हैं। यदि हम चाहते हैं कि तत्व लिपटे रहें, लेकिन उनके लिए आवश्यक स्थान पर कब्जा कर लें, लाइन से लाइन। यह ग्रिड से बहुत अलग है। इस तरह के टेम्प्लेट टैग का एक सेट (एक या दो शब्द जो आप तत्वों के एक सेट के रूप में अच्छी तरह से प्रदर्शित करना चाहते हैं) का एक सेट हो सकते हैं जो आपको एक सख्त ग्रिड में डालने के बजाय उस स्थान को लेते हैं जो आपको आवश्यक है।

फ्लेक्सबॉक्स वर्तमान में एक कंटेनर के अंदर एक तत्व को लंबवत और क्षैतिज रूप से केंद्र में रखने का सबसे अच्छा तरीका है।

भविष्य में (यदि ब्राउज़र लचीले लेआउट के बाहर बॉक्स संरेखण गुणों का समर्थन करते हैं), हम ऐसा प्रदर्शन के बिना कर सकते हैं : कंटेनर में फ्लेक्स । हालांकि, इस समय, आपको बस एक अतिरिक्त सीएसएस लाइन की आवश्यकता है, जो कोई समस्या नहीं है।

फ्लेक्सबॉक्स छोटे एक आयामी घटकों के साथ बहुत अच्छा करता है । प्रपत्र फ़ील्ड्स, आइकन या अन्य जानकारी के सेट आसानी से व्यवस्थित किए जा सकते हैं और प्रत्येक तत्व को ध्यान से आकार दिए बिना लचीले होने की अनुमति दी जाती है।

आप फ्लेक्सबॉक्स को ऐसे परिदृश्य में भी चुन सकते हैं, जहां सामग्री को कंटेनर के नीचे लाने की आवश्यकता होती है, जिससे इसे पॉप अप करने से रोका जा सके। नीचे दिए गए उदाहरण में, मैं कंटेनर को एक फ्लेक्स कंटेनर बनाता हूं, सामग्री को एक कॉलम के रूप में प्रदर्शित करता हूं, और फिर घटक को नीचे धक्का देते हुए, मध्य को बढ़ने देता हूं।

विकास के दौरान, मैं फ्लेक्सबॉक्स को कई छोटे कार्यों के लिए उपयोगी पाता हूं, जो कि संरेखण का सही प्रदर्शन करता है, और वस्तुओं के बीच जगह का वितरण करता है। आप इन कार्यों में से कुछ के लिए निश्चित रूप से एक-आयामी जाल कंटेनर का उपयोग कर सकते हैं, और इस बारे में चिंता न करें कि आप क्या करने का निर्णय लेते हैं।

हालांकि, मुझे लगता है कि फ्लेक्सबॉक्स उस स्थिति में सबसे अच्छा होगा जहां आपको अतिरिक्त तत्वों को जोड़ने की आवश्यकता है जो मुझे अपने डिजाइन में उम्मीद नहीं थी। उदाहरण के लिए, अगर मेरे पास ग्रिड का उपयोग करने वाला एक नेविगेशन घटक है, तो मैं सभी तत्वों के लिए पर्याप्त ट्रैक बनाऊंगा, क्योंकि मैं नहीं चाहता कि यदि मेरे पास "बहुत सारे" तत्व हैं तो एक नई लाइन बनाई जाएगी। फ्लेक्सबॉक्स के साथ लंबे समय तक, मैं फ्लेक्स-बेस 0 (या ऑटो ) के साथ तत्वों को लचीला बनाने की अनुमति दूंगा , फिर तत्व खुद नए साथी को लाइन में जाने देंगे, इसके लिए जगह खाली करेंगे।

आपको Flexbox कब नहीं लेना चाहिए?

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

ग्रिड उदाहरण में दो-आयामी लेआउट हैं। एक ही समय में पंक्ति और स्तंभ द्वारा लेआउट।

उदाहरण Flexbox एक आयामी लेआउट है। हमने फ्लेक्स-लाइनें पैक कीं, लेकिन अंतरिक्ष में प्लेसमेंट लाइन द्वारा लाइन में होता है। प्रत्येक पंक्ति अनिवार्य रूप से फ्लेक्स दिशा में एक नए फ्लेक्स कंटेनर के रूप में कार्य करती है।

इसलिए, यदि आपके घटक को दो-आयामी लेआउट की आवश्यकता है, तो आप फ्लेक्सबॉक्स के बजाय ग्रिड का उपयोग करना बेहतर होगा। इससे कोई फर्क नहीं पड़ता कि यह एक बड़ा या छोटा घटक है। यदि आप इस लेख से एक बात लेते हैं, तो अपने सिर से यह विचार हटा दें कि किसी कारण से ग्रिड केवल मुख्य पृष्ठ के लेआउट के लिए है, और घटकों के लिए फ्लेक्सबॉक्स । आपके पास एक छोटा घटक हो सकता है जिसमें दो आयामी लेआउट की आवश्यकता होती है, और एक मुख्य पृष्ठ संरचना जो एक आयामी लेआउट के लिए बेहतर होती है।

एक और अच्छी जगह जहां एक ग्रिड को सबसे अच्छा समाधान माना जा सकता है, वह है चौड़ाई का उपयोग करना या फ्लेक्स-आधार को अपने फ्लेक्स-एलिमेंट्स की लंबाई की इकाई के रूप में उन्हें फ्लेक्स-एलिमेंट्स की दूसरी पंक्ति के साथ संरेखित करना या किसी तरह से लचीलेपन को सीमित करना। अक्सर, यह इंगित करता है कि आपको वास्तव में दो-आयामी लेआउट पद्धति की आवश्यकता है, या कि ग्रिड कंटेनर से नियंत्रण आपके लेआउट के लिए बेहतर अनुकूल है।

उदाहरण के लिए, हम अपने लचीले लेआउट को हमारे तत्वों के लचीलेपन को सीमित करते हुए ग्रिड की तरह दिख सकते हैं। फ्लेक्स-ग्रो को 0 पर सेट करना और प्रतिशत में तत्वों के आकार की गणना करना, इसी तरह कि हमने एक अस्थायी "ग्रिड" में तत्वों के आकार को कैसे निर्धारित किया। यदि आप खुद को ऐसा करते हुए पाते हैं, तो मेरा सुझाव है कि एक ग्रिड लेआउट सबसे अच्छा तरीका है, क्योंकि यह इस प्रकार के लेआउट के लिए डिज़ाइन किया गया है।

कहा कि सभी के साथ, याद रखें कि बहुत बार कोई स्पष्ट सही या गलत उत्तर नहीं है। कभी-कभी, केवल एक चीज जो आप कर सकते हैं वह है विभिन्न तरीकों की कोशिश करें और देखें कि घटक के लिए सबसे अच्छा क्या काम करता है। याद रखें कि आप एक ब्रेकपॉइंट पर फ्लेक्सबॉक्स का उपयोग करके लेआउट विधियों को भी स्विच कर सकते हैं और दूसरे को ग्रिड कर सकते हैं।

और इसलिए, ऊपर कर्ल!

मुझे उम्मीद है कि यह फ्लेक्सबॉक्स श्रृंखला उपयोगी रही है और यह प्रदर्शित किया है कि फ्लेक्स आइटम के लिए कुछ संरेखण और अंशांकन एल्गोरिदम को समझना उनके साथ जीवन को कैसे आसान बनाता है।

यदि आपके पास कोई अनसुलझे प्रश्न हैं या कोई टेम्पलेट है जिसका उपयोग किए गए लेआउट विधि के संदर्भ में एक स्पष्ट उत्तर नहीं लगता है, तो एक टिप्पणी छोड़ दें।