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

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 है. जगह होने की वजह से, पहले बच्चे को लाइन में रखा जाता है.

पहली इमेज. FlexBox कंटेनर में रखा गया पहला आइटम.

लाइन में 80dp जगह खाली है. अंतर 8dp है. बच्चा 2, 40dp है. ज़रूरी जगह 48dp है. जगह होने की वजह से, गैप और Child 2 को लाइन में रखा जाता है.

दूसरी इमेज. पहले आइटम के बाद, FlexBox कंटेनर में रखा गया दूसरा आइटम.

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

तीसरी इमेज. तीसरे आइटम को नई लाइन में रखा गया है, क्योंकि यह पहली लाइन में फ़िट नहीं होता.

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

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

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