FlexBox

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

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

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

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

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