Menetapkan perilaku penampung

Untuk mengonfigurasi perilaku penampung FlexBox, buat FlexBoxConfig blok dan berikan menggunakan parameter 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

Gunakan FlexBoxConfig untuk menentukan arah tata letak, perilaku gabungan, perataan, dan jarak antar-item.

Arah tata letak

Fungsi direction menetapkan sumbu utama, yang menentukan arah item ditata. Fungsi ini menerima nilai berikut:

Row (default): Menetapkan sumbu utama menjadi horizontal. Di lokalitas kiri-ke-kanan, ini akan menjadi kiri-ke-kanan, dengan kebalikannya di kanan-ke-kiri.
RowReverse: Membalikkan arah Row.
Column: Menetapkan sumbu utama menjadi vertikal, atas-ke-bawah.
ColumnReverse: Membalikkan arah Column.

Menyelaraskan item dan mendistribusikan ruang tambahan

Bagian berikut menjelaskan cara menyelaraskan item dan mendistribusikan ruang tambahan di sepanjang sumbu utama dan sumbu silang.

Sepanjang sumbu utama

Gunakan justifyContent untuk mendistribusikan item di sepanjang sumbu utama. Tabel berikut menunjukkan perilaku saat arahnya adalah Row.


`Start`
`Center`
`End`
`SpaceBetween`
`SpaceAround`
`SpaceEvenly`

Sepanjang sumbu silang

Gunakan alignItems untuk menyelaraskan item di sepanjang sumbu silang dalam satu baris. Perilaku ini dapat diganti oleh item individual menggunakan alignSelf pengubah.

Gambar berikut menunjukkan perilaku saat arahnya adalah Row:


	`Start`	`End`	`Center`	`Stretch`	`Baseline`

Gunakan alignContent untuk menyelaraskan baris ke sumbu silang dan mendistribusikan ruang tambahan antarbaris. Properti ini hanya berlaku jika ada beberapa baris (penggabungan diaktifkan). Gambar berikut menunjukkan perilaku saat arahnya adalah Row:


	`Start`	`End`	`Center`	`Stretch`	`SpaceBetween`	`SpaceAround`

Menggabungkan item

Penggabungan memungkinkan penampung FlexBox menjadi multi-baris, memindahkan item yang tidak sesuai ke baris atau kolom baru di sepanjang sumbu silang. Konfigurasikan perilaku penggabungan menggunakan wrap.

Nilai `FlexWrap`	Contoh menggunakan arah `Row`
`NoWrap` (default): Mencegah item digabungkan. Item akan meluap jika ukuran utama tidak mencukupi.
`Wrap`: Jika tidak ada cukup ruang untuk item (plus jarak apa pun), baris baru akan dibuat ke arah sumbu silang. Misalnya, jika arahnya adalah `Row`, baris baru akan ditambahkan di bawah.
`WrapReverse`: Sama seperti `Wrap`, kecuali baris baru ditambahkan ke arah yang berlawanan dengan sumbu silang. Misalnya, jika arahnya adalah `Row`, baris baru akan ditambahkan di atas.

Contoh berikut menunjukkan cara kerja algoritma penggabungan FlexBox. Penampung FlexBox memiliki ukuran utama 100dp, dengan wrap ditetapkan ke FlexWrap.Wrap dan jarak 8dp. Penampung ini berisi tiga item dengan basis 20dp, 40dp, dan 50dp.

Ada ruang 100dp yang tersedia di baris. Anak 1 adalah 20dp. Ada ruang, sehingga Anak 1 ditempatkan ke dalam baris.

Item pertama yang ditempatkan di penampung FlexBox. — **Gambar 1.** Item pertama ditempatkan di penampung `FlexBox`.

Ada ruang 80dp yang tersedia di baris. Jaraknya adalah 8dp. Anak 2 adalah 40dp. Ruang yang diperlukan adalah 48dp. Ada ruang, sehingga jarak dan Anak 2 ditempatkan ke dalam baris.

Ada ruang 32dp yang tersedia di baris. Jaraknya adalah 8dp. Anak 3 adalah 50dp. Ruang yang diperlukan adalah 58dp. Tidak ada cukup ruang di baris saat ini, sehingga Anak 3 ditempatkan di baris baru.

Item ketiga ditempatkan di baris baru karena tidak muat di baris pertama. — **Gambar 3.** Item ketiga ditempatkan di baris baru karena tidak sesuai dengan baris pertama.

Menambahkan jarak antar-item

Tambahkan jarak antarbaris dan kolom menggunakan rowGap dan columnGap. Hal ini berguna untuk menghindari penambahan pengubah penspasian ke elemen turunan.