फ़्लेक्सबॉक्स

सीएसएस पॉडकास्ट - 010: Flexbox

रिस्पॉन्सिव डिज़ाइन के लिए डिज़ाइन पैटर्न मुश्किल हो सकता है. यह एक साइडबार है जो कुछ कॉन्टेंट के साथ इनलाइन रहता है. व्यूपोर्ट स्पेस होने पर यह पैटर्न बढ़िया काम करता है, लेकिन स्पेस छोटा होने पर, मुश्किल लेआउट समस्या पैदा कर सकता है.

फ़्लेक्सिबल बॉक्स लेआउट मॉडल (फ़्लेक्सबॉक्स) एक लेआउट मॉडल है, जिसे एक-डाइमेंशन वाले कॉन्टेंट के लिए डिज़ाइन किया गया है. अलग-अलग साइज़ के कई आइटम लेने, उन आइटम के लिए सबसे अच्छा लेआउट देने में, यह बेहतरीन तरीका है.

यह साइडबार पैटर्न के लिए सबसे सही लेआउट मॉडल है. Flexbox से, साइडबार और कॉन्टेंट को इनलाइन तरीके से अलग-अलग रखने में मदद मिलती है. साथ ही, जगह न होने पर, साइडबार नई लाइन में चला जाएगा. ब्राउज़र के लिए कड़े डाइमेंशन सेट करने के बजाय, फ़्लेक्सबॉक्स की मदद से यह संकेत दिया जा सकता है कि कॉन्टेंट कैसा दिखेगा.

फ़्लेक्स लेआउट से क्या किया जा सकता है?

Flex लेआउट में नीचे दी गई सुविधाएं हैं, जिनके बारे में इस गाइड में बताया गया है.

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

मेन ऐक्सिस और क्रॉस ऐक्सिस

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

एक-दूसरे के बगल में बने तीन बॉक्स, जिनके बगल में एक तीर है और जो बाईं ओर दाईं ओर है. ऐरो को मेन ऐक्सिस के तौर पर लेबल किया गया है

Flex आइटम, मुख्य ऐक्सिस पर ग्रुप के तौर पर मूव होते हैं. याद रखें: हमारे पास कई चीज़ें हैं और हम ग्रुप के तौर पर उनके लिए, सबसे अच्छा लेआउट बनाने की कोशिश कर रहे हैं.

क्रॉस ऐक्सिस, मुख्य ऐक्सिस पर दूसरी दिशा में चलता है. इसलिए, अगर flex-direction row है, तो कॉलम के साथ-साथ क्रॉस ऐक्सिस चलता है.

अलग-अलग ऊंचाई वाले तीन बॉक्स, जिनके बगल में एक तीर है और जो बाईं ओर दाईं ओर है. ऐरो को मुख्य ऐक्सिस के तौर पर लेबल किया गया है. यहां एक और ऐरो भी है, जो सबसे ऊपर से नीचे की ओर है. इसे क्रॉस ऐक्सिस के तौर पर लेबल किया गया है

आप क्रॉस ऐक्सिस पर दो काम कर सकते हैं. आइटम को अलग-अलग या ग्रुप के तौर पर मूव किया जा सकता है, ताकि वे एक-दूसरे के साथ और फ़्लेक्स कंटेनर के हिसाब से अलाइन हों. साथ ही, अगर आपने फ़्लेक्स लाइनों को रैप किया है, तो उन लाइनों को ग्रुप के तौर पर इस्तेमाल किया जा सकता है. इससे यह कंट्रोल किया जा सकता है कि उन लाइनों को स्पेस कैसे असाइन किया जाए. इस गाइड में देखा जा सकता है कि यह सब कैसे काम करता है. अभी ध्यान रखें कि मुख्य ऐक्सिस आपके flex-direction के साथ-साथ चलता है.

फ़्लेक्स कंटेनर बनाना

आइए देखते हैं कि अलग-अलग साइज़ के आइटम का ग्रुप बनाकर और उन्हें रखने के लिए फ़्लेक्सबॉक्स इस्तेमाल करके फ़्लेक्सबॉक्स कैसा व्यवहार करता है.

<div class="container" id="container">
  <div>One</div>
  <div>Item two</div>
  <div>The item we will refer to as three</div>
</div>

फ़्लेक्सबॉक्स का इस्तेमाल करने के लिए, आपको यह एलान करना होगा कि आप सामान्य ब्लॉक और इनलाइन लेआउट के बजाय, फ़्लेक्स फ़ॉर्मैट वाले कॉन्टेक्स्ट का इस्तेमाल करना चाहते हैं. ऐसा करने के लिए, display प्रॉपर्टी की वैल्यू को flex में बदलें.

.container {
  display: flex;
}

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

शुरुआती वैल्यू का मतलब है कि:

  • आइटम एक पंक्ति के तौर पर दिखते हैं.
  • इन्हें रैप नहीं किया जाता.
  • वे कंटेनर को भरने के लिए नहीं बढ़ते.
  • इन्हें कंटेनर की शुरुआत में लगाया जाता है.

आइटम की दिशा कंट्रोल करना

भले ही, आपने अब तक flex-direction प्रॉपर्टी नहीं जोड़ी हो, लेकिन flex-direction की शुरुआती वैल्यू row होने की वजह से, आइटम लाइन के तौर पर दिखते हैं. अगर आपको लाइन चाहिए, तो आपको प्रॉपर्टी जोड़ने की ज़रूरत नहीं है. दिशा बदलने के लिए, प्रॉपर्टी और चार में से कोई एक वैल्यू जोड़ें:

  • row: आइटम एक लाइन के तौर पर दिखाए गए हैं.
  • row-reverse: आइटम, फ़्लेक्सिबल कंटेनर के आखिर से लाइन के तौर पर रखे गए हैं.
  • column: आइटम, कॉलम के तौर पर दिखाए जाते हैं.
  • column-reverse : आइटम, फ़्लेक्सिबल कंटेनर के आखिर में कॉलम के तौर पर रखे जाते हैं.

यहां दिए गए डेमो में मौजूद आइटम के ग्रुप का इस्तेमाल करके, सभी वैल्यू आज़माई जा सकती हैं.

आइटम के फ़्लो और सुलभता सुविधाओं को बदलना

विज़ुअल डिसप्ले का क्रम बदलने वाली प्रॉपर्टी का इस्तेमाल करते समय आपको सावधानी बरतनी चाहिए, क्योंकि एचटीएमएल दस्तावेज़ में चीज़ों को क्रम से लगाया जाता है. इससे सुलभता पर बुरा असर पड़ सकता है. इसका अच्छा उदाहरण row-reverse और column-reverse है. रीऑर्डरिंग सिर्फ़ विज़ुअल ऑर्डर के लिए होता है, लॉजिकल ऑर्डर के लिए नहीं. यह समझना अहम है, क्योंकि लॉजिकल ऑर्डर वह क्रम होता है जिस क्रम में स्क्रीन रीडर, कॉन्टेंट को पढ़ेगा और कीबोर्ड का इस्तेमाल करके नेविगेट करने वाला कोई भी व्यक्ति, उस क्रम को समझेगा.

नीचे दिए गए वीडियो में देखें कि कैसे उलटी लाइन वाले लेआउट में, लिंक के बीच टैब करना डिसकनेक्ट हो जाता है, क्योंकि कीबोर्ड नेविगेशन, विज़ुअल डिसप्ले के बजाय डीओएम के साथ-साथ चलता है.

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

ज़्यादा जानकारी के लिए देखें:

लिखने के मोड और निर्देश

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

अगर आपने कुछ जैपनीज़ टाइपफ़ेस जैसे वर्टिकल राइटिंग मोड का इस्तेमाल किया है, तो एक पंक्ति ऊपर से नीचे की ओर वर्टिकल तरीके से दिखेगी. इस डेमो में flex-direction को बदलकर देखें, जो वर्टिकल राइटिंग मोड का इस्तेमाल कर रहा है.

इसलिए, फ़्लेक्सिबल आइटम डिफ़ॉल्ट रूप से जिस तरह काम करते हैं वह दस्तावेज़ के राइटिंग मोड से जुड़ा होता है. ज़्यादातर ट्यूटोरियल अंग्रेज़ी या हॉरिज़ॉन्टल, बाएं से दाएं लिखने वाले मोड का इस्तेमाल करके लिखे जाते हैं. इससे यह माना जा सकता है कि फ़्लेक्सिबल आइटम बाईं ओर लाइन में हैं और हॉरिज़ॉन्टल तौर पर चलते हैं.

मेन और क्रॉस ऐक्सिस के साथ-साथ राइटिंग मोड पर भी गौर करें. इससे हम ऊपर, नीचे, बाएं, और दाएं फ़्लेक्सबॉक्स के बजाय start और end के बारे में बात करेंगे. इसलिए, इससे समझने में आसानी होगी. हर ऐक्सिस का एक शुरुआती और आखिरी हिस्सा होता है. मुख्य ऐक्सिस की शुरुआत को मेन-स्टार्ट कहा जाता है. इसलिए, हमारे फ़्लेक्सिबल आइटम मुख्य शुरुआत से लाइन अप किए जाते हैं. ऐक्सिस का आखिरी हिस्सा मेन-एंड होता है. क्रॉस ऐक्सिस की शुरुआत क्रॉस-स्टार्ट और आखिरी क्रॉस-एंड होती है.

ऊपर दिए गए शब्दों का लेबल किया गया डायग्राम

फ़्लेक्सिबल आइटम रैप करना

flex-wrap प्रॉपर्टी की शुरुआती वैल्यू nowrap है. इसका मतलब है कि अगर कंटेनर में ज़रूरत के मुताबिक जगह नहीं है, तो आइटम ओवरफ़्लो हो जाएंगे.

एक फ़्लेक्सिबल कंटेनर, जिसके अंदर नौ आइटम हैं, छोटे हो जाते हैं, जिससे एक शब्द लाइन पर लिखा होता है, लेकिन उन्हें साथ-साथ दिखाने के लिए काफ़ी जगह नहीं है, इसलिए फ़्लेक्स आइटम को कंटेनर के बॉक्स के बाहर बढ़ा दिया गया है.
'कम से कम कॉन्टेंट वाले साइज़' वाले फ़्लेक्स आइटम पर क्लिक करने के बाद, वे अपने कंटेनर से ओवरफ़्लो होने लगेंगे

शुरुआती वैल्यू का इस्तेमाल करके दिखाए जा रहे आइटम के साइज़ जितने छोटे हो सकते हैं उतने छोटे हो जाएंगे. जैसे, ओवरफ़्लो होने से पहले min-content साइज़ तक कम हो जाएंगे.

आइटम रैप करने के लिए, फ़्लेक्स कंटेनर में flex-wrap: wrap जोड़ें.

.container {
  display: flex;
  flex-wrap: wrap;
}

जब कोई फ़्लेक्सिबल कंटेनर रैप होता है, तो यह कई फ़्लेक्स लाइन बनाता है. स्पेस डिस्ट्रिब्यूशन के मामले में, हर लाइन एक नए फ़्लेक्स कंटेनर की तरह काम करती है. इसलिए अगर आप पंक्तियों को रैप कर रहे हैं, तो पंक्ति 2 में किसी चीज़ को पंक्ति 1 के ऊपर की किसी चीज़ के साथ रखना संभव नहीं है. इसका मतलब है कि फ़्लेक्सबॉक्स एक डाइमेंशन है. आप अलाइनमेंट को एक ऐक्सिस, पंक्ति या कॉलम में कंट्रोल कर सकते हैं. दोनों को एक साथ नहीं, बल्कि ग्रिड में किया जा सकता है.

फ़्लेक्स-फ़्लो शॉर्टहैंड

शॉर्टहैंड flex-flow का इस्तेमाल करके, flex-direction और flex-wrap प्रॉपर्टी सेट की जा सकती हैं. उदाहरण के लिए, flex-direction को column पर सेट करने और आइटम को रैप करने की अनुमति देने के लिए:

.container {
  display: flex;
  flex-flow: column wrap;
}

फ़्लेक्सिबल आइटम के अंदर स्पेस को कंट्रोल करना

यह मानते हुए कि हमारे कंटेनर में आइटम को दिखाने के लिए ज़रूरत से ज़्यादा जगह है, आइटम शुरू में एक पंक्ति में दिखते हैं और जगह को भरने के लिए नहीं बढ़ते. वे अपने कॉन्टेंट की साइज़ से ज़्यादा नहीं हो सकते. ऐसा इसलिए है, क्योंकि flex- प्रॉपर्टी की शुरुआती वैल्यू यह है:

  • flex-grow: 0: आइटम नहीं बढ़ रहे हैं.
  • flex-shrink: 1: आइटम अपने flex-basis से छोटे हो सकते हैं.
  • flex-basis: auto: आइटम का बेस साइज़ auto है.

इसे flex: initial की कीवर्ड वैल्यू से दिखाया जा सकता है. flex की शॉर्टहैंड प्रॉपर्टी या flex-grow, flex-shrink, और flex-basis के लॉन्गहैंड, फ़्लेक्स कंटेनर के बच्चों पर लागू किए जाते हैं.

आइटम की संख्या बढ़ाने के लिए, छोटे आइटम के बजाय बड़े आइटम को ज़्यादा जगह देने के लिए flex:auto का इस्तेमाल करें. ऊपर दिए गए डेमो का इस्तेमाल करके, इसे आज़माया जा सकता है. यह प्रॉपर्टी को इस पर सेट करता है:

  • flex-grow: 1: आइटम अपने flex-basis से ज़्यादा बड़े हो सकते हैं.
  • flex-shrink: 1: आइटम अपने flex-basis से छोटे हो सकते हैं.
  • flex-basis: auto: आइटम का बेस साइज़ auto है.

flex: auto का इस्तेमाल करने का मतलब है कि आइटम अलग-अलग साइज़ के हैं. ऐसा इसलिए है, क्योंकि आइटम के बीच शेयर की गई जगह को हर आइटम को मैक्स-कॉन्टेंट साइज़ तय करने के बाद शेयर किया जाता है. इसलिए, बड़े आइटम को ज़्यादा जगह मिलेगी. सभी आइटम का साइज़ एक जैसा रखने और कॉन्टेंट के साइज़ को अनदेखा करने के लिए, डेमो में flex:auto को flex: 1 में बदलें.

यह अनपैक करता है:

  • flex-grow: 1: आइटम अपने flex-basis से ज़्यादा बड़े हो सकते हैं.
  • flex-shrink: 1: आइटम अपने flex-basis से छोटे हो सकते हैं.
  • flex-basis: 0: आइटम का बेस साइज़ 0 है.

flex: 1 का इस्तेमाल करने का मतलब है कि सभी आइटम का साइज़ ज़ीरो है. इसलिए, फ़्लेक्सिबल कंटेनर की पूरी जगह डिस्ट्रिब्यूट करने के लिए उपलब्ध है. हर आइटम का 1 का flex-grow फ़ैक्टर होता है, इसलिए वे सभी एक जैसे बढ़ते हैं और स्पेस भी एक जैसा होता है.

आइटम को अलग-अलग दरों पर बढ़ाने की अनुमति देना

आपको सभी आइटम को 1 का flex-grow फ़ैक्टर देने की ज़रूरत नहीं है. आप चाहें, तो अपने फ़्लेक्सिबल आइटम को flex-grow के हिसाब से अलग-अलग रखें. नीचे दिए गए डेमो में पहले आइटम में flex: 1, दूसरे flex: 2 और तीसरे flex: 3 हैं. जैसे-जैसे ये आइटम 0 से बढ़ते हैं, फ़्लेक्स कंटेनर में उपलब्ध जगह को छह में शेयर कर दिया जाता है. एक हिस्सा पहले आइटम के लिए दिया जाता है, दूसरे हिस्से में दो और तीसरे हिस्से को तीन हिस्से दिए जाते हैं.

आप यही काम auto के flex-basis से भी कर सकते हैं. हालांकि, आपको तीनों वैल्यू तय करनी होंगी. पहली वैल्यू flex-grow, दूसरी flex-shrink, और तीसरी flex-basis है.

.item1 {
  flex: 1 1 auto;
}

.item2 {
  flex: 2 1 auto;
}

ऐसा कम इस्तेमाल होता है, क्योंकि auto के flex-basis का इस्तेमाल करने की वजह ब्राउज़र को स्पेस का बंटवारा करने की अनुमति देना है. अगर एल्गोरिदम अपने हिसाब से किसी आइटम को अपने हिसाब से बड़ा करना चाहता है, तो वह उपयोगी हो सकता है.

फ़्लेक्सिबल आइटम का क्रम बदला जा रहा है

order प्रॉपर्टी का इस्तेमाल करके, आपके फ़्लेक्स कंटेनर में मौजूद आइटम का क्रम बदला जा सकता है. इस प्रॉपर्टी से क्रम के ग्रुप में मौजूद आइटम को क्रम में लगाया जा सकता है. आइटम को flex-direction से तय की गई दिशा में रखा जाता है, जो कि सबसे कम वैल्यू पहले होती है. अगर एक से ज़्यादा आइटम की वैल्यू एक जैसी है, तो वह वैल्यू उस वैल्यू वाले दूसरे आइटम के साथ दिखेगी.

नीचे दिया गया उदाहरण इस क्रम को दिखाता है.

आपने जो सीखा है उसकी जांच करें

फ़्लेक्सबॉक्स के बारे में अपनी जानकारी परखें

डिफ़ॉल्ट flex-direction यह है

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

डिफ़ॉल्ट रूप से, फ़्लेक्स कंटेनर बच्चों को रैप करता है.

सही
रैप करने की सुविधा चालू होनी चाहिए.
false
display: flex के साथ flex-wrap: wrap का इस्तेमाल करके, बच्चों का ग्रुप रैप करें

फ़्लेक्सिबल चाइल्ड आइटम, स्क्विश दिखता है. इनमें से कौनसी फ़्लेक्स प्रॉपर्टी इस समस्या को कम करने में मदद करती है?

flex-grow
इस प्रॉपर्टी से पता चलता है कि एलिमेंट, आधार के साइज़ से बड़े हो सकते हैं या नहीं. हालांकि, इसमें यह नहीं बताया जाता कि एलिमेंट का व्यवहार, आधार के हिसाब से कैसा होना चाहिए.
flex-shrink
हां, इस प्रॉपर्टी में बताया गया है कि अगर चौड़ाई, आधार से कम हो रही है, तो साइज़ को मैनेज करने का तरीका क्या है.
flex-basis
इससे साइज़ तय करने की शुरुआत होती है, लेकिन साइज़ की स्थितियों को मैनेज करने का तरीका नहीं पता होना चाहिए, जहां चौड़ाई से कम हो जाती है, जैसे कि किसी टेढ़ी-मेढ़ी स्थिति में.

Flexbox अलाइनमेंट की खास जानकारी

Flexbox, आइटम को अलाइन करने और आइटम के बीच स्पेस देने के लिए, अपने साथ कई प्रॉपर्टी उपलब्ध कराता है. ये प्रॉपर्टी इतनी काम की थीं कि अब इन्हें इनके लिए तय की गई खास जानकारी में शामिल कर दिया गया है. ये प्रॉपर्टी आपको ग्रिड लेआउट में भी दिखेंगी. यहां देखा जा सकता है कि flexbox का इस्तेमाल करने पर, ये कैसे काम करते हैं.

प्रॉपर्टी के सेट को दो ग्रुप में रखा जा सकता है. स्पेस डिस्ट्रिब्यूशन के लिए प्रॉपर्टी और अलाइनमेंट के लिए प्रॉपर्टी. स्पेस बांटने वाली प्रॉपर्टी:

  • justify-content: मुख्य ऐक्सिस पर स्पेस का डिस्ट्रिब्यूशन.
  • align-content: क्रॉस ऐक्सिस पर स्पेस का डिस्ट्रिब्यूशन.
  • place-content: ऊपर दी गई दोनों प्रॉपर्टी को सेट करने के लिए शॉर्टहैंड.

फ़्लेक्सबॉक्स में अलाइन करने के लिए इस्तेमाल की जाने वाली प्रॉपर्टी:

  • align-self: क्रॉस ऐक्सिस पर किसी एक आइटम को अलाइन करता है.
  • align-items: सभी आइटम को क्रॉस ऐक्सिस पर ग्रुप के तौर पर अलाइन करता है.

अगर आप मुख्य ऐक्सिस पर काम कर रहे हैं, तो प्रॉपर्टी justify- से शुरू होती हैं. क्रॉस ऐक्सिस पर वे align- से शुरू होते हैं.

मुख्य ऐक्सिस पर स्पेस देना

पहले इस्तेमाल किए गए एचटीएमएल के साथ, फ़्लेक्सिबल आइटम एक लाइन के तौर पर दिखाए गए हैं और मुख्य ऐक्सिस पर जगह मौजूद है. आइटम इतने बड़े नहीं हैं कि फ़्लेक्स कंटेनर को पूरी तरह भरा जा सके. आइटम, फ़्लेक्स कंटेनर की शुरुआत में लाइन में रखे जाते हैं, क्योंकि justify-content की शुरुआती वैल्यू flex-start होती है. आइटम शुरुआत में मौजूद होते हैं और कोई भी अतिरिक्त जगह आखिर में होती है.

फ़्लेक्स कंटेनर में justify-content प्रॉपर्टी जोड़ें और उसकी वैल्यू flex-end दें. इसके बाद, आइटम कंटेनर के आखिर में रखे जाते हैं और खाली जगह को शुरुआत में रखा जाता है.

.container {
  display: flex;
  justify-content: flex-end;
}

justify-content: space-between की मदद से, आइटम के बीच स्पेस भी बांटा जा सकता है.

डेमो में दिए गए कुछ वैल्यू को आज़माएं और सही वैल्यू के पूरे सेट के लिए MDN देखें.

flex-direction: column के साथ

अगर आपने अपने flex-direction को column में बदल दिया है, तो justify-content कॉलम पर काम करेगा. कॉलम के तौर पर काम करते समय अपने कंटेनर में खाली जगह रखने के लिए, आपको अपने कंटेनर को height या block-size देना होगा. ऐसा न करने पर आपके पास कॉन्टेंट बांटने के लिए जगह नहीं बचेगी.

इस बार फ़्लेक्सबॉक्स कॉलम लेआउट के साथ, अलग-अलग वैल्यू आज़माएं.

फ़्लेक्स लाइनों के बीच स्पेस देना

रैप किए गए फ़्लेक्स कंटेनर की मदद से, आपको क्रॉस ऐक्सिस पर जगह देने के लिए जगह मिल सकती है. इस मामले में, justify-content की वैल्यू के साथ align-content प्रॉपर्टी का इस्तेमाल किया जा सकता है. justify-content में आइटम को डिफ़ॉल्ट रूप से flex-start पर अलाइन किया जाता है, जबकि align-content की शुरुआती वैल्यू stretch होती है. उस डिफ़ॉल्ट व्यवहार को बदलने के लिए, फ़्लेक्स कंटेनर में align-content प्रॉपर्टी जोड़ें.

.container {
  align-content: center;
}

डेमो में इसे आज़माएं. इस उदाहरण में फ़्लेक्सिबल आइटम की लाइनों को रैप किया गया है और कंटेनर में block-size है, ताकि हमारे पास थोड़ी खाली जगह हो.

place-content की शॉर्टहैंड

justify-content और align-content, दोनों को सेट करने के लिए, place-content का इस्तेमाल एक या दो वैल्यू के साथ किया जा सकता है. दोनों ऐक्सिस के लिए एक ही वैल्यू का इस्तेमाल किया जाएगा. अगर आपने यह तय किया है कि दोनों ऐक्सिस का इस्तेमाल align-content के लिए किया जाए और दूसरे का इस्तेमाल justify-content के लिए किया जाए.

.container {
  place-content: space-between;
  /* sets both to space-between */
}

.container {
  place-content: center flex-end;
  /* wrapped lines on the cross axis are centered,
  on the main axis items are aligned to the end of the flex container */
}

क्रॉस-ऐक्सिस पर आइटम को अलाइन करना

क्रॉस ऐक्सिस पर, align-items और align-self का इस्तेमाल करके, अपने आइटम को फ़्लेक्स लाइन में भी अलाइन किया जा सकता है. इस अलाइनमेंट के लिए उपलब्ध जगह, फ़्लेक्स कंटेनर की ऊंचाई या आइटम के रैप किए गए सेट के मामले में फ़्लेक्स लाइन पर निर्भर करेगी.

align-self की शुरुआती वैल्यू stretch होती है. इसलिए, एक लाइन में मौजूद फ़्लेक्सिबल आइटम, डिफ़ॉल्ट रूप से सबसे ऊंचे आइटम की ऊंचाई तक फैल जाते हैं. इसमें बदलाव करने के लिए, अपने किसी भी फ़्लेक्सिबल आइटम में align-self प्रॉपर्टी जोड़ें.

.container {
  display: flex;
}

.item1 {
  align-self: flex-start;
}

आइटम को अलाइन करने के लिए, इनमें से किसी भी वैल्यू का इस्तेमाल करें:

  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

एमडीएन पर वैल्यू की पूरी सूची देखें.

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

align-self प्रॉपर्टी अलग-अलग आइटम पर लागू होती है. सभी अलग-अलग align-self प्रॉपर्टी को ग्रुप के तौर पर सेट करने के लिए, align-items प्रॉपर्टी को फ़्लेक्स कंटेनर पर लागू किया जा सकता है.

.container {
  display: flex;
  align-items: flex-start;
}

इस अगले डेमो में, क्रॉस ऐक्सिस पर मौजूद सभी आइटम को एक ग्रुप के तौर पर अलाइन करने के लिए, align-items की वैल्यू बदलकर देखें.

फ़्लेक्सबॉक्स में खुद को सही ठहराना क्यों नहीं है?

Flex आइटम, मुख्य ऐक्सिस पर ग्रुप के तौर पर काम करते हैं. इसलिए, किसी एक आइटम को ग्रुप से अलग करने का कोई सिद्धांत नहीं है.

ग्रिड लेआउट में, justify-self और justify-items प्रॉपर्टी इनलाइन ऐक्सिस पर काम करती हैं. इससे वे ग्रिड लेआउट में आइटम को अलाइन करती हैं. फ़्लेक्स लेआउट, आइटम को एक ग्रुप मानते हैं. इसलिए, ये प्रॉपर्टी फ़्लेक्सिबल कॉन्टेक्स्ट में लागू नहीं की जाती हैं.

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

किसी आइटम को वर्टिकल और हॉरिज़ॉन्टल तौर पर बीच में करने का तरीका

अलाइनमेंट प्रॉपर्टी का इस्तेमाल, किसी आइटम को किसी दूसरे बॉक्स के बीच में लाने के लिए किया जा सकता है. justify-content प्रॉपर्टी, आइटम को मुख्य ऐक्सिस पर अलाइन करती है, जो लाइन है. क्रॉस ऐक्सिस पर align-items प्रॉपर्टी.

.container {
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

आपने जो सीखा है उसकी जांच करें

फ़्लेक्सबॉक्स के बारे में अपनी जानकारी परखें

.container {
  display: flex;
  direction: ltr;
}

फ़्लेक्सबॉक्स के साथ वर्टिकल अलाइन करने के लिए, इसका इस्तेमाल करें

कीवर्ड अलाइन करें
अच्छा
कीवर्ड को दोनों ओर बराबर सेट करें
माफ़ी
 
.container {
  display: flex;
  direction: ltr;
}

फ़्लेक्सबॉक्स के साथ हॉरिज़ॉन्टल तौर पर अलाइन करने के लिए,

कीवर्ड अलाइन करें
माफ़ी
कीवर्ड को दोनों ओर बराबर सेट करें
अच्छा
 
.container {
  display: flex;
  direction: ltr;
}

डिफ़ॉल्ट रूप से, फ़्लेक्सिबल आइटम stretch के मुताबिक होते हैं. अगर आपको चाइल्ड आइटम के लिए इस्तेमाल किया जाने वाला कॉन्टेंट साइज़ चाहिए, तो इनमें से कौनसी स्टाइल का इस्तेमाल किया जा सकता है?

justify-content: flex-start
दोनों ओर संरेखित प्रॉपर्टी हॉरिज़ॉन्टल अलाइनमेंट के लिए है, न कि वर्टिकल के लिए.
align-content: start
content फ़्लेक्स लाइन को अलाइन करता है, चाइल्ड आइटम अलाइनमेंट को नहीं.
height: auto
इससे कोई असर नहीं पड़ेगा.
align-items: flex-start
हां, हमें उन्हें 'सबसे ऊपर' या स्टार्ट के हिसाब से वर्टिकल अलाइन करना है. इससे डिफ़ॉल्ट स्ट्रेच वैल्यू हट जाएगी और इसके बजाय कॉन्टेंट की ऊंचाई का इस्तेमाल होगा.

संसाधन