FlexBox

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

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

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

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

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

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

FlexBox की प्रॉपर्टी और व्यवहार लगभग एक जैसा लगेगा.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

अब जब आपको FlexBox के कॉन्सेप्ट के बारे में पता चल गया है, तो बुनियादी FlexBox बनाने के लिए, शुरू करें पर जाएं.