FlexBox

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

FlexBox की मदद से, ये काम किए जा सकते हैं:

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

FlexBox का इस्तेमाल कब करें

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

शब्दावली और कॉन्सेप्ट

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

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

पहली इमेज. FlexBox दिशा Row होने पर, ऐक्सिस और साइज़.

दूसरी इमेज. FlexBox दिशा Column होने पर, ऐक्सिस और साइज़.

प्रॉपर्टी लागू करना

FlexBox प्रॉपर्टी को दो तरीकों से लागू किया जा सकता है:

• FlexBox(config) का इस्तेमाल करके, FlexBox कंटेनर में
• Modifier.flex का इस्तेमाल करके, FlexBox में मौजूद किसी आइटम को

कंटेनर प्रॉपर्टी (config)

आइटम प्रॉपर्टी (Modifier.flex)

direction - आइटम के लेआउट की दिशा wrap - अगर मुख्य साइज़ काफ़ी नहीं है, तो आइटम रैप करने हैं या नहीं justifyContent - मुख्य ऐक्सिस के साथ-साथ आइटम को डिस्ट्रिब्यूट करने का तरीका alignItems - क्रॉस ऐक्सिस के साथ आइटम अलाइन करने का तरीका alignContent - एक से ज़्यादा लाइनें होने पर, क्रॉस साइज़ से मिले अतिरिक्त स्पेस को कैसे डिस्ट्रिब्यूट करें rowGap / columnGap - इससे आइटम और लाइनों के बीच स्पेस जुड़ जाता है इन प्रॉपर्टी के बारे में ज़्यादा जानने के लिए, कंटेनर के व्यवहार को सेट करना लेख पढ़ें.

basis - मुख्य साइज़ से अतिरिक्त जगह डिस्ट्रिब्यूट होने से पहले आइटम का साइज़ grow - मुख्य साइज़ के मुकाबले, इस आइटम को कितना अतिरिक्त स्पेस मिलना चाहिए shrink - मुख्य साइज़ के मुकाबले, इस आइटम को मिलने वाले स्पेस में कमी का अनुपात alignSelf - इस आइटम को क्रॉस साइज़ से अतिरिक्त जगह कैसे असाइन करें, alignItems को बदलता है order - लेआउट के क्रम को कंट्रोल करता है इन प्रॉपर्टी के बारे में ज़्यादा जानने के लिए, आइटम के व्यवहार को सेट करना लेख पढ़ें.

FlexBox लेआउट एल्गोरिदम के बारे में जानकारी

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

FlexBox का लेआउट एल्गोरिदम इस तरह काम करता है:

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

2. बच्चों को क्रम से लगाएं: अगर order वैल्यू मौजूद हैं, तो बच्चों को उनके हिसाब से क्रम से लगाएं.

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

4. मुख्य ऐक्सिस में मौजूद आइटम को अलाइन करना या उनका साइज़ बदलना: हर लाइन के लिए, आइटम के बीच या आइटम में मौजूद अतिरिक्त जगह को साइज़ बदलकर या अलाइन करके डिस्ट्रिब्यूट करें.

5. क्रॉस ऐक्सिस में आइटम अलाइन करना या उनका साइज़ बदलना: हर लाइन के लिए, आइटम और लाइनों के बीच या उनमें मौजूद अतिरिक्त जगह को खींचकर या अलाइन करके डिस्ट्रिब्यूट करें.

FlexBox के बारे में जानने के बाद, शुरू करें पर जाएं और एक बुनियादी FlexBox बनाएं.