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

The CSS Podcast - 010: 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 वैल्यू इसका अच्छा उदाहरण हैं. क्रम में बदलाव सिर्फ़ विज़ुअल ऑर्डर के लिए होता है, लॉजिकल ऑर्डर के लिए नहीं. यह समझना ज़रूरी है, क्योंकि लॉजिकल ऑर्डर वह क्रम होता है जिसमें स्क्रीन रीडर कॉन्टेंट को पढ़कर सुनाएगा और कीबोर्ड का इस्तेमाल करके नेविगेट करने वाला कोई भी व्यक्ति उसी क्रम का पालन करेगा.

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

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

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

• कॉन्टेंट का क्रम बदलना
• Flexbox और कीबोर्ड नेविगेशन डिसकनेक्ट हो जाता है

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

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

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

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

मुख्य और क्रॉस ऐक्सिस के साथ लिखने वाले मोड के साथ, फ़्लेक्सबॉक्स में टॉप, बॉटम, लेफ़्ट, और राइट के बजाय start और end के बारे में बात करना समझने में आसान हो सकता है. हर अक्ष की शुरुआत और आखिर होती है. मुख्य अक्ष की शुरुआत को main-start कहा जाता है. इसलिए, शुरुआत में हमारे फ़्लेक्सिबल आइटम, मुख्य शुरुआत से लाइन अप होते हैं. उस ऐक्सिस का आखिरी हिस्सा main-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 का इस्तेमाल करने से पता चलता है कि सभी आइटम का साइज़ शून्य है. इसलिए, फ़्लेक्स कंटेनर का सारा स्पेस बांटा जा सकता है. सभी आइटम का flex-grow फ़ैक्टर 1 होता है. इसलिए, सभी आइटम का साइज़ बराबर बढ़ता है और स्पेस को बराबर बांटा जाता है.

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

आपको सभी आइटम के लिए flex-grow का 1 फ़ैक्टर नहीं देना होगा. अपने फ़्लेक्स आइटम के लिए, अलग-अलग 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 के हिसाब से तय किया जाता है. सबसे कम वैल्यू सबसे पहले होती है. अगर एक से ज़्यादा आइटम की वैल्यू एक जैसी है, तो उन्हें उस वैल्यू वाले अन्य आइटम के साथ दिखाया जाएगा.

नीचे दिए गए उदाहरण में, इस क्रम के बारे में बताया गया है.

देखें कि आपको कितना समझ आया है

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

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

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

MDN पर वैल्यू की पूरी सूची देखें.

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

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

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

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

फ़्लेक्सबॉक्स में justify-self एट्रिब्यूट क्यों नहीं है?

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;
}

संसाधन

• MDN CSS फ़्लेक्सिबल बॉक्स लेआउट में, उदाहरणों के साथ ज़्यादा जानकारी वाली गाइड की सीरीज़ शामिल है.
• फ़्लेक्सबॉक्स के लिए सीएसएस ट्रिक गाइड
• फ़्लेक्सबॉक्स फ़्लेक्स कंटेनर बनाने पर क्या होता है
• फ़्लेक्सबॉक्स में अलाइनमेंट के बारे में ज़रूरी जानकारी
• फ़्लेक्सिबल बॉक्स कितना बड़ा है?
• फ़्लेक्सबॉक्स के लिए इस्तेमाल के उदाहरण
• Chrome DevTools में सीएसएस फ़्लेक्सबॉक्स लेआउट की जांच करना और उन्हें डीबग करना