FlexBox

FlexBox adalah penampung yang menata item dalam satu arah. Penampung ini dapat mengubah ukuran, menggabungkan, menyelaraskan, dan mendistribusikan ruang di antara item untuk mengisi ruang yang tersedia secara optimal. Tata letak ini berguna untuk item berukuran berbeda dan untuk mengubah ukuran item saat ruang yang tersedia berubah.

Dengan FlexBox, Anda dapat:

• Mengontrol pertumbuhan dan penyusutan item untuk mengisi ruang yang tersedia
• Menggabungkan item ke baris atau kolom baru jika tidak ada cukup ruang untuk item tersebut
• Mendistribusikan ruang tambahan di antara item menggunakan preset yang praktis

Kapan harus menggunakan FlexBox

FlexBox biasanya digunakan untuk menampilkan sejumlah kecil item dalam tata letak layar keseluruhan. Untuk tata letak layar keseluruhan, Grid biasanya merupakan pilihan yang lebih baik. FlexBox tidak mendukung pemuatan lambat item. Untuk menampilkan item dalam jumlah besar, gunakan daftar dan petak lambat. Jika Anda perlu menggabungkan item, gunakan FlexBox dan bukan FlowRow dan FlowColumn.

Terminologi dan konsep

FlexBox menata itemnya dalam baris horizontal atau vertikal. Arah baris ini menetapkan sumbu utama. 90 derajat ke sumbu utama adalah sumbu silang. Panjang FlexBox di sepanjang sumbu utama dikenal sebagai ukuran utama. Panjang sumbu silang yang sesuai dikenal sebagai ukuran silang. Ukuran dan sumbu ini membentuk dasar perilaku FlexBox.

Menerapkan properti

Anda dapat menerapkan properti FlexBox dengan dua cara:

• Ke penampung FlexBox menggunakan FlexBox(config)
• Ke item di dalam FlexBox menggunakan Modifier.flex

Properti penampung (config)

Properti item (Modifier.flex)

direction - arah tata letak item wrap - apakah akan menggabungkan item jika ukuran utama tidak mencukupi justifyContent - cara mendistribusikan item di sepanjang sumbu utama alignItems - cara menyelaraskan item di sepanjang sumbu silang alignContent - cara mendistribusikan ruang tambahan dari ukuran silang saat ada beberapa baris rowGap / columnGap - menambahkan ruang di antara item dan baris Lihat Menetapkan perilaku penampung untuk mengetahui informasi selengkapnya tentang properti ini.

basis - ukuran item sebelum ruang tambahan dari ukuran utama didistribusikan grow - bagian ruang tambahan dari ukuran utama yang harus diterima item ini shrink - bagian defisit ruang dari ukuran utama yang harus diterima item ini alignSelf - cara mendistribusikan ruang tambahan dari ukuran silang ke item ini, mengganti alignItems order - mengontrol urutan tata letak Lihat Menetapkan perilaku item untuk mengetahui informasi selengkapnya tentang properti ini.

Memahami algoritma tata letak FlexBox

Salah satu fitur FlexBox yang paling canggih adalah kemampuannya untuk mengubah ukuran turunannya agar sesuai dengan ruang yang tersedia. Memahami cara FlexBox melakukannya dapat membantu Anda menetapkan properti FlexBox untuk mengoptimalkan UI Anda untuk semua ukuran yang memungkinkan.

Algoritma tata letak FlexBox berfungsi dengan cara berikut:

1. Menghitung ukuran dasar turunan: Gunakan nilai basis turunan untuk menghitung ukuran awalnya di sepanjang sumbu utama sebelum ruang tambahan didistribusikan.

2. Mengurutkan turunan: Urutkan turunan berdasarkan nilai order, jika ada.

3. Membuat baris: Untuk setiap turunan, periksa apakah ukuran awalnya ditambah gap akan sesuai dengan ruang yang tersisa di baris saat ini. Jika ya, tempatkan turunan ini ke dalam baris. Jika tidak, tempatkan turunan ke baris baru jika penggabungan diaktifkan, atau tempatkan item ke baris saat ini yang akan meluap (akan sebagian tersembunyi oleh tepi penampung).

4. Menyelaraskan atau mengubah ukuran item di sumsum utama: Untuk setiap baris, distribusikan ruang tambahan ke atau di antara item dengan mengubah ukuran atau menyelaraskannya.

5. Menyelaraskan atau mengubah ukuran item di sumbu silang: Untuk setiap baris, distribusikan ruang tambahan ke atau di antara item dan baris dengan meregangkan atau menyelaraskan mereka.

Setelah Anda memahami konsep FlexBox, lihat Memulai untuk membuat FlexBox dasar.