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

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 है. बच्चे 2 का नाम 40dp है. ज़रूरी जगह 48dp है. जगह होने की वजह से, गैप और Child 2 को लाइन में रखा गया है.

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

आइटम के बीच खाली जगह जोड़ना

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

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