این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

تنظیم رفتار کانتینر

برای پیکربندی رفتار کانتینر 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 برای تراز کردن خطوط نسبت به محور متقاطع و توزیع فضای اضافی بین خطوط استفاده کنید. این ویژگی فقط زمانی اعمال می‌شود که چندین خط وجود داشته باشد (wrapping فعال باشد). تصاویر زیر رفتار را زمانی که جهت 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 قرار داده می‌شود. — **شکل ۱.** اولین آیتم قرار داده شده در کانتینر `FlexBox` .

فضای خالی 80dp در خط وجود دارد. فاصله 8dp است. فرزند ۲، 40dp است. فضای مورد نیاز 48dp است. فضا وجود دارد، بنابراین فاصله و فرزند ۲ در خط قرار می‌گیرند.

فضای خالی در خط 32dp است. فاصله 8dp است. فرزند ۳، 50dp است. فضای مورد نیاز 58dp است. فضای کافی در خط فعلی وجود ندارد، بنابراین فرزند ۳ در یک خط جدید قرار می‌گیرد.

مورد سوم در یک خط جدید قرار داده شد زیرا در خط اول جا نمی‌شد. — **شکل ۳.** مورد سوم به دلیل اینکه در خط اول جا نمی‌شود، در خط جدید قرار داده شده است.

بین موارد فاصله اضافه کنید

با استفاده از rowGap و columnGap بین ردیف‌ها و ستون‌ها فاصله اضافه کنید. این کار برای جلوگیری از اضافه کردن اصلاح‌کننده‌های فاصله به عناصر فرزند مفید است.