Menetapkan perilaku penampung

Untuk mengonfigurasi perilaku penampung FlexBox, buat blok FlexBoxConfig 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 wrapping, penyelarasan, dan jarak antar-item.

Arah tata letak

Properti direction menentukan sumbu utama, yang menentukan arah item disusun.

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, dari atas ke bawah.
ColumnReverse: Membalikkan arah Column.

Menyejajarkan item dan mendistribusikan ruang ekstra

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

Di 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`

Di sepanjang sumbu silang

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

Gambar berikut menunjukkan perilaku saat arahnya adalah Row:


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

Gunakan alignContent untuk menyelaraskan garis ke sumbu silang dan mendistribusikan ruang ekstra di antara garis. 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

Pelipatan memungkinkan penampung FlexBox menjadi multi-baris, memindahkan item yang tidak muat ke baris atau kolom baru di sepanjang sumbu silang. Konfigurasi perilaku pembungkusan menggunakan wrap.

`FlexWrap` nilai	Contoh menggunakan arah `Row`
`NoWrap` (default): Mencegah item di-wrap. Item akan meluap jika ukuran utama tidak mencukupi.
`Wrap`: Jika tidak ada cukup ruang untuk item (plus jarak), baris baru akan dibuat ke arah sumbu silang. Misalnya, jika arahnya adalah `Row`, baris baru akan ditambahkan di bawah.
`WrapReverse`: Sama seperti `Wrap`, kecuali garis 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 pembungkusan FlexBox. Penampung FlexBox memiliki ukuran utama 100dp, dengan wrap ditetapkan ke FlexWrap.Wrap dan jarak 8dp. Hasil ini berisi tiga item dengan basis 20dp, 40dp, dan 50dp.

Ada 100dp ruang kosong yang tersedia dalam antrean. Anak 1 adalah 20dp. Ada ruang, jadi Child 1 ditempatkan ke dalam baris.

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

Ada 80dp ruang kosong yang tersedia dalam antrean. Selisihnya adalah 8dp. Anak 2 adalah 40dp. Ruang yang diperlukan adalah 48dp. Ada ruang, sehingga celah dan Turunan 2 ditempatkan ke dalam baris.

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

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

Menambahkan jarak antar-item

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