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

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

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

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

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

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

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

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

मुख्य ऐक्सिस और क्रॉस ऐक्सिस

फ़्लेक्सबॉक्स को समझने के लिए मुख्य ऐक्सिस और क्रॉस ऐक्सिस के कॉन्सेप्ट को समझना है. मुख्य ऐक्सिस, वह है जिसे आपकी 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 : आइटम, फ़्लेक्स कंटेनर के आखिर से कॉलम के तौर पर दिखते हैं.

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

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

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

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

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

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

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

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

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

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

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

मुख्य और क्रॉस ऐक्सिस के साथ-साथ लिखने के मोड को चुनने पर, बात यह है कि हम ऊपर, नीचे, बाईं, और दाईं तरफ़ के बजाय शुरू और खत्म करने के बारे में बात करते हैं फ़्लेक्सबॉक्स को समझना आसान हो सकता है. हर ऐक्सिस का एक शुरुआती और आखिरी हिस्सा होता है. मुख्य ऐक्सिस की शुरुआत को 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 का इस्तेमाल करने का मतलब है कि सभी आइटम का साइज़ शून्य है, इसलिए, फ़्लेक्सिबल कंटेनर का पूरा स्पेस, डिस्ट्रिब्यूट करने के लिए उपलब्ध है. हर आइटम में 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 के बताए गए निर्देशों के हिसाब से तय किया जाता है निम्नतम मान पहले. अगर एक से ज़्यादा आइटम का मान एक जैसा है, तो उन्हें उस मान वाले दूसरे आइटम के साथ दिखाया जाएगा.

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

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

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

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 के साथ फ़्लेक्सिबल आइटम की एक लाइन है. आखिरी आइटम, फ़्लेक्स कंटेनर की ऊंचाई बताता है. पहले आइटम में flex-start की वैल्यू वाली align-self प्रॉपर्टी है. उस प्रॉपर्टी की वैल्यू बदलकर देखें कि वह क्रॉस ऐक्सिस पर उसके स्पेस में कैसे मूव करती है.

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

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

संसाधन

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