FlexBox

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

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

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

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

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

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

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

पीछे जाएं
अडैप्टिव क्या करें और क्या न करें
आगे बढ़ें
शुरू करना