FlexBox

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

FlexBox की मदद से:

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

फ़्लेक्सबॉक्स का इस्तेमाल कब करना चाहिए

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

शब्दावली और सिद्धांत

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

प्रॉपर्टी लागू करें

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 बनाने के लिए, शुरू करें पर जाएं.