Advertisement
  1. Web Design
  2. Flexbox
Webdesign

Flexbox एलाइनमेंट के लिए एक व्यापक गाइड

by
Difficulty:IntermediateLength:MediumLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

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

दो Axes की एक टेल

Flexbox का उपयोग करते समय हम दो अक्षों के साथ काम करते हैं: main और cross अक्ष। जैसा कि उनके नाम बताते हैं, ये अक्ष एक पदानुक्रमित संबंध बनाती हैं, main धुरी क्रॉस अक्ष से सुपीरियर होती है।

The cross axis is always perpendicular to the main axis
cross अक्ष हमेशा main अक्ष के लिए लंबवत (perpendicular) है।

यह पदानुक्रमित संबंध Flexbox और CSS ग्रिड लेआउट के बीच मुख्य अंतर का गठन करता है। डिज़ाइन द्वारा, CSS ग्रिड में दो गैर-पदानुक्रमित अक्ष होते हैं: row और column अक्ष। ऐसा इसलिए है क्योंकि वेब स्टैण्डर्ड के रचनाकारों का उद्देश्य CSS ग्रिड को two-dimensional लेआउट मॉडल के रूप में उपयोग करना है। दूसरी तरफ, Flexbox में एक प्राथमिक और एक द्वितीयक धुरी है, क्योंकि इसका उद्देश्य one dimension लेआउट मॉडल होना है। Flexbox के बारे में अच्छी बात यह है कि आप मुख्य धुरी की स्थिति निर्धारित करके उस आयाम की दिशा को परिभाषित कर सकते हैं, इसलिए आप row पर आधारित और कॉलम पर आधारित दोनों लेआउट बना सकते हैं।

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

मुख्य एक्सिस को परिभाषित करके शुरू करते हैं

मुख्य धुरी की दिशा flex-direction प्रॉपर्टी द्वारा निर्धारित की जाती है- चार संभावित वैल्यू हैं:

  1. flex-direction: row; - मुख्य अक्ष लेफ्ट से राइट तक चलती है (यह डिफ़ॉल्ट है)
  2. flex-direction: row-reverse; - मुख्य धुरी राइट से लेफ्ट चलाता है
  3. flex-direction: column; - मुख्य धुरी ऊपर से नीचे तक चलता है
  4. flex-direction: column-reverse; - मुख्य धुरी नीचे से ऊपर तक चलता है

चलो देखते हैं कि यह ब्राउज़र में कैसा दिखता है। मैं बहुत ही सरल HTML मार्कअप का उपयोग करूंगा, केवल नौ बक्से एक-दूसरे पर खड़े होंगे:

.container क्लास के साथ बाहरी div फ्लेक्स कंटेनर होगा और .item क्लास के साथ आंतरिक divs फ्लेक्स आइटम होंगे।

1. लेफ्ट से राइट: row

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

जब flex-direction row होती है, तो मुख्य धुरी हॉरिजॉन्टल रूप से लेफ्ट से राइट तक चलती है। इसलिए यह दिशा है जिसके साथ फ्लेक्स आइटम रखे जाते हैं। क्रॉस अक्ष लंबवत रूप से ऊपर से नीचे तक चलता है, और जब आइटम व्रैप करते हैं तो वे इस दिशा में ऐसा करते हैं।

2. राइट से लेफ्ट: row-reverse

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

यदि आप फ्लेक्स आइटमों की संख्या को देखते हैं तो आप अब देख सकते हैं, प्रत्येक row को राइट से लेफ्ट तक गिना जाता है, लेकिन आइटम अभी भी वर्टिकली नीचे व्रैप करते हैं।

यदि आप क्रॉस अक्ष की दिशा को भी रिवर्स करना चाहते हैं तो आपको flex-wrap प्रॉपर्टी पर wrap-reverse का उपयोग करने की आवश्यकता है। अंतर पहचानिए:

3. ऊपर से नीचे: column

जब flex-direction column पर सेट किया जाता है, तो मुख्य और क्रॉस अक्ष अपनी स्थिति बदलते हैं। मुख्य धुरी वर्टीकल (ऊपर से नीचे तक) चलती है और क्रॉस अक्ष हॉरिजॉन्टल रूप से चलती है (राइट से लेफ्ट)।

अब आप देखेंगे कि फ्लेक्स आइटम्स की संख्या rows को फॉलो करने की बजाये column को फॉलो करती हैं। यह वह जगह है जहां Flexbox की one-dimension प्रकृति शायद सबसे अधिक दिखाई देती है। आइटम केवल तभी व्रैप होंगे जब कंटेनर को निश्चित ऊंचाई दी जाती है।

4. नीचे से ऊपर: column-reverse

मुझे उम्मीद है कि आप यहां एक पैटर्न विकसित कर रहे हैं। जब flex-direction column-reverse पर सेट किया जाता है, तो मुख्य अक्ष अभी भी वर्टीकल है और क्रॉस अक्ष अभी भी हॉरिजॉन्टल है, जैसा कि हमने पिछले उदाहरण में देखा था। हालांकि, कॉलम डायरेक्शन को उलट दिया जाता है ताकि मुख्य धुरी नीचे से ऊपर तक हो।

जैसा कि आप नीचे देख सकते हैं, फ्लेक्स आइटमों की संख्या नीचे राइट साइड से शुरू होती है, ऊपर और लेफ्ट साइड की ओर बढ़ती है।

फिर, क्रॉस अक्ष की दिशा बदलने के लिए, आपको flex-wrap प्रॉपर्टी पर wrap-reverse का उपयोग करने की आवश्यकता है।

Flex-flow शार्टहैंड

flex-flow प्रॉपर्टी flex-direction और flex-wrap के लिए एक शार्टहैंड है। उदाहरण के लिए, आप निम्न का उपयोग कर सकते हैं:

इसके बजाय:

Flexbox एलाइनमेंट प्रॉपर्टीज

Flexbox एलाइनमेंट मुख्य और क्रॉस अक्ष दोनों के साथ हो सकता है।

प्रॉपर्टीज में से एक (justify-content) मुख्य धुरी से संबंधित है, जबकि अन्य तीन (align-items, align-self, align-content) क्रॉस अक्ष से संबंधित हैं।

जैसा कि आप उम्मीद कर सकते हैं, एलाइनमेंट प्रॉपर्टीज का व्यवहार flex-direction प्रॉपर्टी पर निर्भर करता है। उदाहरण के लिए, flex-direction row या row-reverse होने पर justify-content आइटम को हॉरिजॉन्टल रूप से अलाइन करती है, लेकिन वर्टीकल रूप से अगर flex-direction column या column-reverse है। यह इस लचीले बॉक्स की असली सुंदरता है।

मुख्य एक्सिस के साथ एलाइनमेंट

justify-content प्रॉपर्टी मुख्य धुरी के साथ फ्लेक्स कंटेनर के भीतर फ्लेक्स आइटम को अलाइन करती है। यह फ्लेक्स कंटेनर में सभी आइटम्स के लिए आवश्यक स्थान की गणना करने के बाद शेष अतिरिक्त स्थान वितरित करता है। justify-content प्रॉपर्टी पांच वैल्यू ले सकती है:

  1. flex-start - फ्लेक्स आइटम मुख्य धुरी की शुरुआत में जस्टिफाई हैं (यह डिफ़ॉल्ट है)
  2. flex-end - फ्लेक्स आइटम मुख्य धुरी के अंत की ओर जस्टिफाई होते हैं
  3. center - फ्लेक्स आइटम मुख्य धुरी के केंद्र के आसपास जस्टिफाई हैं
  4. space-between - फ्लेक्स आइटम को मुख्य धुरी के साथ समान रूप से वितरित किया जाता है, flex-start से flex-end तक
  5. space-around - फ्लेक्स आइटम मुख्य धुरी के साथ समान रूप से वितरित किए जाते हैं, लेकिन प्रत्येक छोर पर आधे आकार की जगह जोड़ दी जाती है

justify-content को सही तरीके से उपयोग करने के लिए, आपको अपने अक्षों के निर्देशों पर ध्यान देना होगा। उदाहरण के लिए, justify-content: flex-start; नियम हमेशा मुख्य धुरी की शुरुआत में फ्लेक्स आइटम स्क्वीज़ करता है। यह लेफ्ट साइड का एन्ड होता है जब flex-direction row होती है, यह राइट एन्ड जब यह row-reverse होती है, जब column होता है तो सबसे ऊपर बिंदु, और जब column-reverse होता है तो सबसे नीचे का पॉइंट होता है।

निम्नलिखित पेन दिखाता है कि flex-direction row होने पर justify-content प्रॉपर्टी की विभिन्न वैल्यू फ्लेक्स आइटम को अलाइन करती हैं।

क्रॉस एक्सिस के साथ एलाइनमेंट

चीजों को अगले स्तर पर ले जाने का समय। आप क्रॉस अक्ष के साथ आइटम्स को अलाइन करने के लिए तीन CSS प्रॉपर्टीज का उपयोग कर सकते हैं। उनमें से दो (align-items और align-self) सिंगल-लाइन एलाइनमेंट के लिए हैं, जबकि align-content बहु-लाइन एलाइनमेंट के लिए है।

सिंगल लाइन एलाइनमेंट

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

दोनों निम्नलिखित वैल्यू को ले सकते हैं:

  1. auto - align-self प्रॉपर्टी बनता है जो align-items की वैल्यू को इन्हेरिट करता है (align-self के लिए डिफ़ॉल्ट)
  2. flex-start - फ्लेक्स आइटम क्रॉस अक्ष की शुरुआत की ओर अलाइन होते हैं
  3. flex-end - फ्लेक्स आइटम क्रॉस अक्ष के अंत की ओर अलाइन होते हैं
  4. center - फ्लेक्स आइटम क्रॉस अक्ष के केंद्र के चारों ओर अलाइन होते हैं
  5. baseline - फ्लेक्स आइटम अलाइन होते हैं जैसे कि उनकी बेसलाइन एलाइनमेंट लाइनें
  6. stretch - फ्लेक्स कंटेनर को भरने के लिए क्रॉस अक्ष के साथ फ्लेक्स आइटम फैलाए जाते हैं (align-items के लिए डिफ़ॉल्ट)

नीचे दिया गया pen दिखाता है कि flex-direction row होने पर align-items और align-self प्रॉपर्टीज कैसे व्यवहार करते हैं। डिफ़ॉल्ट रूप से क्रॉस अक्ष ऊपर से नीचे तक चलता है। आइटम्स में पैडिंग की अलग-अलग मात्रा होती है ताकि उनकी ऊंचाई और बेसलाइन बदल सकें। उदाहरण के लिए, आप flex-start वैल्यू को क्रॉस अक्ष की शुरुआत में आइटम को अलाइन कर सकते हैं, जबकि flex-end उन्हें अंत में अलाइन करता है।

स्वाभाविक रूप से, जब flex-direction column या column-reverse होता है, तो आप कॉलम-आधारित लेआउट के साथ काम करेंगे, इसलिए align-items और align-self प्रॉपर्टीज आइटम को हॉरिजॉन्टल रूप से अलाइन करेंगे।

मल्टी लाइन एलाइनमेंट

align-content प्रॉपर्टी क्रॉस अक्ष के साथ मल्टी-लाइन एलाइनमेंट संभव बनाता है। यह निर्धारित करता है कि एक से दूसरे लाइनों में कितनी फ्लेक्स आइटम अलग-अलग हैं। align-content प्रॉपर्टी का एक सिंगल-लाइन फ्लेक्स कंटेनर पर कोई प्रभाव नहीं पड़ता है (उदाहरण के लिए, जब कंटेंट लिपटता नहीं है)। इसमें छह अलग-अलग वैल्यूज लग सकती हैं:

  1. flex-start - फ्लेक्स आइटम क्रॉस अक्ष की शुरुआत में अलाइन होते हैं
  2. flex-end - फ्लेक्स आइटम क्रॉस अक्ष के अंत में अलाइन होते हैं
  3. center - फ्लेक्स आइटम क्रॉस अक्ष के केंद्र के चारों ओरअलाइन होते हैं
  4. space-around - फ्लेक्स आइटम को फ्लेक्स स्टार्ट और फ्लेक्स एंड के बीच क्रॉस अक्ष के साथ सामान रूप से वितरित किया जाता है
  5. space-around - फ्लेक्स आइटम को क्रॉस अक्ष के साथ सामान रूप से वितरित किया जाता है, लेकिन प्रत्येक छोर पर आधा आकार की जगह जोड़ दी जाती है
  6. stretch - फ्लेक्स कंटेनर भरने के लिए क्रॉस अक्ष के साथ फ्लेक्स आइटम फैलाए जाते हैं (यह डिफ़ॉल्ट है)

नीचे, आप विभिन्न pen देख सकते हैं कि align-content प्रॉपर्टी की विभिन्न वैल्यूज कैसे काम करती हैं। हमारे अन्य डेमो के साथ, डिफ़ॉल्ट एक्सिस डायरेक्शन लागू होती हैं।

इन पहले दो उदाहरणों में एक सिंगल-लाइन प्रॉपर्टी (align-content) परिभाषित नहीं है, इसलिए आप डिफ़ॉल्ट रूप से सभी आइटमों को दिखाएंगे। इस अगले उदाहरण में हम align-items: flex-start; सेट करेंगे ताकि आइटम क्रॉस एक्सिस की शुरुआत की ओर अलाइन हों, लेकिन हम align-content: flex-end; सेट करेंगे ताकि कंटेंट के एक्सिस के अंत की ओर अलाइन हो:

यदि आपने अब तक जो कुछ भी किया है, उसे आपने समझ लिया है, तो आपने बहुत अच्छा किया है! अब आपके पास Flexbox एलाइनमेंट की ठोस बुनियादी समझ है।

निष्कर्ष

हमने कर लिया! संक्षेप में दोहराते हैं; याद रखने की सबसे महत्वपूर्ण बात यह है कि आपको मुख्य और क्रॉस एक्सिस को दिमाग में रखकर डायरेक्शन को रखना चाहिए। flex-direction प्रॉपर्टी सेट करके हमेशा अपना एलाइनमेंट शुरू करें। Flexbox एलाइनमेंट के बारे में अधिक जानने के लिए और अपना ज्ञान को अभ्यास में रखने के लिए, आप निम्न रिसोर्सेज को भी देख सकते हैं:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.