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

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, दोनों को जोड़ता है.