सीएसएस पॉडकास्ट - 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
है.
इसका मतलब है कि अगर कंटेनर में ज़रूरत के मुताबिक जगह नहीं है, तो आइटम ओवरफ़्लो हो जाएंगे.
![एक फ़्लेक्सिबल कंटेनर, जिसके अंदर नौ आइटम हैं, छोटे हो जाते हैं, जिससे एक शब्द लाइन पर लिखा होता है, लेकिन उन्हें साथ-साथ दिखाने के लिए काफ़ी जगह नहीं है, इसलिए फ़्लेक्स आइटम को कंटेनर के बॉक्स के बाहर बढ़ा दिया गया है.](https://web.dev/static/learn/css/flexbox/image/a-flex-container-nine-it-e0d8b646b8c9c.jpg?authuser=7&hl=hi)
शुरुआती वैल्यू का इस्तेमाल करके दिखाए जा रहे आइटम के साइज़ जितने छोटे हो सकते हैं उतने छोटे हो जाएंगे. जैसे, ओवरफ़्लो होने से पहले 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
डिफ़ॉल्ट रूप से, फ़्लेक्स कंटेनर बच्चों को रैप करता है.
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
संसाधन
- एमडीएन सीएसएस के लचीले बॉक्स के लेआउट में, उदाहरणों के साथ ज़्यादा जानकारी वाली गाइड की सीरीज़ मौजूद होती है.
- फ़्लेक्सबॉक्स के लिए सीएसएस ट्रिक्स गाइड
- फ़्लेक्सबॉक्स Flex कंटेनर बनाने पर क्या होता है
- फ़्लेक्सबॉक्स में अलाइनमेंट के बारे में आपके लिए ज़रूरी जानकारी
- फ़्लेक्सिबल बॉक्स कितना बड़ा है?
- फ़्लेक्सबॉक्स के लिए इस्तेमाल के उदाहरण
- Chrome DevTools में सीएसएस फ़्लेक्सबॉक्स लेआउट की जांच करना और उन्हें डीबग करना