कंटेनर के व्यवहार को सेट करना

FlexBox कंटेनर के व्यवहार को कॉन्फ़िगर करने के लिए, FlexBoxConfig ब्लॉक बनाएं और config पैरामीटर का इस्तेमाल करके इसे उपलब्ध कराएं.

FlexBox(
    config = {
        direction(FlexDirection.Column)
        wrap(FlexWrap.Wrap)
        alignItems(FlexAlignItems.Center)
        alignContent(FlexAlignContent.SpaceAround)
        justifyContent(FlexJustifyContent.Center)
        gap(16.dp)
    }
) { // child items
}
FlexBoxSnippets.kt

FlexBoxConfig का इस्तेमाल करके, लेआउट की दिशा, रैपिंग का तरीका, अलाइनमेंट, और आइटम के बीच का गैप तय करें.

लेआउट की दिशा

direction फ़ंक्शन, मुख्य ऐक्सिस को सेट करता है. इससे यह तय होता है कि आइटम किस दिशा में रखे जाएंगे. इसमें ये वैल्यू इस्तेमाल की जा सकती हैं:

• Row (डिफ़ॉल्ट): मुख्य ऐक्सिस को हॉरिज़ॉन्टल पर सेट करता है. बाएं से दाएं लिखे जाने वाले लोकेल में, यह बाएं से दाएं होगा. वहीं, दाएं से बाएं लिखे जाने वाले लोकेल में, यह दाएं से बाएं होगा.
• RowReverse: Row की दिशा को उलट देता है.
• Column: मुख्य ऐक्सिस को वर्टिकल, ऊपर से नीचे की ओर सेट करता है.
• ColumnReverse: Column की दिशा को उलट देता है.

आइटम अलाइन करना और अतिरिक्त स्पेस को बांटना

यहां दिए गए सेक्शन में, आइटम को अलाइन करने और मुख्य और क्रॉस ऐक्सिस के साथ अतिरिक्त स्पेस को डिस्ट्रिब्यूट करने का तरीका बताया गया है.

मुख्य ऐक्सिस के साथ

मुख्य ऐक्सिस पर आइटम डिस्ट्रिब्यूट करने के लिए, justifyContent का इस्तेमाल करें. यहां दी गई टेबल में, Row दिशा होने पर होने वाले बदलावों के बारे में बताया गया है.

Start
Center
End
SpaceBetween
SpaceAround
SpaceEvenly

क्रॉस ऐक्सिस के साथ

एक ही लाइन में क्रॉस ऐक्सिस के साथ आइटम अलाइन करने के लिए, alignItems का इस्तेमाल करें. alignSelf मॉडिफ़ायर का इस्तेमाल करके, अलग-अलग आइटम के लिए इस व्यवहार को बदला जा सकता है.

यहां दी गई इमेज से पता चलता है कि दिशा Row होने पर, टेक्स्ट किस तरह दिखता है:

	Start	End	Center	Stretch	Baseline

लाइनों को क्रॉस ऐक्सिस के हिसाब से अलाइन करने और लाइनों के बीच की अतिरिक्त जगह को बांटने के लिए, alignContent का इस्तेमाल करें. यह प्रॉपर्टी सिर्फ़ तब लागू होती है, जब एक से ज़्यादा लाइनें हों (रैपिंग की सुविधा चालू हो). यहां दी गई इमेज में, Row दिशा होने पर, टेक्स्ट का व्यवहार दिखाया गया है:

	Start	End	Center	Stretch	SpaceBetween	SpaceAround

आइटम रैप करें

रैपिंग की मदद से, FlexBox कंटेनर को कई लाइनों में बदला जा सकता है. इससे, उन आइटम को नई लाइन या कॉलम में ले जाया जा सकता है जो क्रॉस-ऐक्सिस पर फ़िट नहीं होते. wrap का इस्तेमाल करके, रैपिंग के व्यवहार को कॉन्फ़िगर करें.

FlexWrap वैल्यू	Row दिशा का इस्तेमाल करने का उदाहरण
NoWrap (डिफ़ॉल्ट): आइटम को रैप होने से रोकता है. अगर मुख्य साइज़ ज़रूरत से कम है, तो आइटम ओवरफ़्लो हो जाते हैं.
Wrap: जब किसी आइटम (और किसी गैप) के लिए ज़रूरत के मुताबिक जगह नहीं होती है, तो क्रॉस ऐक्सिस की दिशा में एक नई लाइन बनाई जाती है. उदाहरण के लिए, अगर दिशा Row है, तो नई लाइन नीचे जोड़ी जाती है.
WrapReverse: यह Wrap जैसा ही है. हालांकि, इसमें नई लाइन को क्रॉस ऐक्सिस की उल्टी दिशा में जोड़ा जाता है. उदाहरण के लिए, अगर दिशा Row है, तो ऊपर एक नई लाइन जोड़ी जाती है.

यहां दिए गए उदाहरण में, FlexBox रैपिंग एल्गोरिदम के काम करने का तरीका बताया गया है. FlexBox कंटेनर का मुख्य साइज़ 100dp है. इसमें wrap को FlexWrap.Wrap पर सेट किया गया है और 8dp का गैप है. इसमें तीन आइटम हैं. इनकी वैल्यू, क्रम से basis 20dp, 40dp, और 50dp है.

लाइन में 100dp जगह उपलब्ध है. पहले बच्चे की उम्र 20dp है. लाइन में जगह है, इसलिए पहले बच्चे को लाइन में शामिल कर लिया जाता है.

लाइन में 80dp जगह उपलब्ध है. अंतर 8dp है. दूसरे बच्चे की उम्र 40dp है. ज़रूरी स्टोरेज 48dp है. यहां जगह है, इसलिए गैप और चाइल्ड 2 को लाइन में रखा गया है.

लाइन में 32dp जगह उपलब्ध है. अंतर 8dp है. तीसरे बच्चे की उम्र 50dp है. ज़रूरी स्टोरेज 58dp है. मौजूदा लाइन में ज़रूरत के मुताबिक जगह नहीं है. इसलिए, तीसरे चाइल्ड व्यू को नई लाइन में रखा गया है.

आइटम के बीच गैप जोड़ना

rowGap और columnGap का इस्तेमाल करके, पंक्तियों और कॉलम के बीच गैप जोड़ें. यह चाइल्ड एलिमेंट में स्पेसिंग मॉडिफ़ायर जोड़ने से बचने के लिए मददगार है.

rowGap आइटम और लाइनों के बीच वर्टिकल स्पेस जोड़ता है.	columnGap आइटम और लाइनों के बीच हॉरिज़ॉन्टल स्पेस जोड़ता है.	gap एक सुविधा फ़ंक्शन है, जो columnGap और rowGap, दोनों को जोड़ता है.