फ्लेक्सबॉक्स और ग्रिड के लिए डिजाइनर गाइड

इन परिवर्तनकारी लेआउट उपकरणों के बारे में डिजाइनरों को क्या जानने की जरूरत है।

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

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

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

flexbox

फ्लेक्सबॉक्स, उर्फ ​​सीएसएस फ्लेक्सिबल बॉक्स, एक नया लेआउट तरीका है जो हमें संरेखण नियंत्रण देता है जो कोई अन्य सीएसएस विधि उत्पादन नहीं कर सकती है। यह 'माइक्रो लेआउट' पर आधारित है: कंटेनर में वस्तुओं के बीच स्थान को संरेखित, क्रमबद्ध और वितरित करने की क्षमता, या उपलब्ध स्थान को सर्वोत्तम रूप से भरने के लिए किसी तत्व की चौड़ाई या ऊँचाई में परिवर्तन।

बेहतर रैपिंग

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

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

फ्लेक्सबॉक्स के साथ बेहतर रैपिंग का उदाहरण

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

फ्लोटिंग जैसे पारंपरिक तरीकों के परिणामस्वरूप छोटे दर्शकों पर स्थान लेबल शेष सही-संरेखित होता है, जो आदर्श से कम है। आप एक विशिष्ट ब्रेकपॉइंट पर बाईं ओर लेबल को फ्लोट करके इसे ठीक कर सकते हैं। इस दृष्टिकोण के साथ समस्या अब आप अपनी सामग्री की स्टाइल को बदलने के लिए एक ब्रेकपॉइंट पर निर्भर हैं, जो लंबाई में भिन्न हो सकती है।

बेहतर रिक्ति और संरेखण

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

फ्लेक्सबॉक्स इसे अज्ञात चौड़ाई या ऊंचाई के एक क्षेत्र के भीतर वस्तुओं की एक अज्ञात संख्या और X या Y अक्ष पर संरेखित वस्तुओं के बीच स्थान के वितरण को सक्षम करके हल करता है। यह बहुत काम करता है कि कैसे स्केच या इलस्ट्रेटर जैसे डिज़ाइन उपकरण वेब पर अपेक्षित नियंत्रण को सक्षम करते हुए रिक्ति और संरेखण को नियंत्रित कर सकते हैं।

फ्लेक्सबॉक्स के साथ बेहतर स्थान वितरण का उदाहरण

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

स्रोत आदेश

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

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

फ्लेक्सबॉक्स के साथ आइटम ऑर्डर करने का उदाहरण

ऊपर का उदाहरण फ्लेक्सबॉक्स में ऑर्डर को दर्शाता है: हम लोगो को फुटर के बाईं ओर प्रदर्शित करते हैं, जो हेडर के अनुरूप है। छोटे व्यूपोर्ट पर, हम लोगो से पहले स्थानों को प्रदर्शित करते हैं। यह पुन: व्यवस्थित करने से समझ में आता है क्योंकि इस संदर्भ में स्थान अधिक महत्वपूर्ण हैं।

जाली का नक्शा

CSS ग्रिड लेआउट एक द्वि-आयामी लेआउट प्रणाली है जो विशेष रूप से वेब के लिए बनाई गई है। यह हमें पृष्ठ को उन क्षेत्रों में विभाजित करने की क्षमता प्रदान करता है, जिन्हें आकार, स्थिति और परत के संदर्भ में आगे परिभाषित किया जा सकता है, जिसके परिणामस्वरूप एक अविश्वसनीय रूप से शक्तिशाली देशी रूपरेखा तैयार होती है।

उद्देश्य के लिए सही

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

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

ग्रिड लेआउट का उदाहरण

अगली पीढ़ी के वेब लेआउट

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

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

ग्रिड लेआउट हमें उन लेआउट रुट से बाहर निकलने में सक्षम करेगा जो हम अंदर हैं और हमें वे उपकरण प्रदान करते हैं जिनकी हमें अगली पीढ़ी के लेआउट बनाने की आवश्यकता है। हम आखिरकार इसे सामान्य डिज़ाइन पैटर्न में मजबूर करने के बजाय सामग्री के चारों ओर बना सकते हैं जो कि प्रत्येक अन्य उत्तरदायी वेबसाइट पर पाया जा सकता है।

चेतावनी

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

अभी और है। बहुत अधिक।

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

flexbox

ग्रिड

कोई भी जो वेब के लिए निर्माण कर रहा है, वह सीएसएस में लेआउट की बात करते समय विभिन्न सीमाओं से परिचित है। अक्सर कई बार, यह डिजाइन से समझौता करने की आवश्यकता होती है ताकि यह विकास में अपेक्षित रूप से काम करे, या इससे भी बदतर, व्यवहार को लागू करने के लिए जावास्क्रिप्ट पर निर्भर हो।

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