FlexBox

FlexBox adalah penampung yang mengatur tata letak item dalam satu arah. Tata letak ini dapat mengubah ukuran, menggabungkan, meratakan, dan mendistribusikan ruang di antara item untuk mengisi ruang yang tersedia secara optimal. Tata letak ini berguna untuk item dengan berbagai ukuran dan untuk mengubah ukuran item saat ruang yang tersedia berubah.

Dengan FlexBox, Anda dapat:

• Mengontrol cara item membesar dan mengecil untuk mengisi ruang yang tersedia
• Gabungkan item ke baris atau kolom baru jika tidak ada cukup ruang untuk item tersebut
• Mendistribusikan ruang ekstra di antara item menggunakan preset yang praktis

Kapan harus menggunakan FlexBox

FlexBox biasanya digunakan untuk menampilkan sejumlah kecil item dalam tata letak layar secara keseluruhan. Untuk tata letak layar secara 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, bukan FlowRow dan FlowColumn.

Terminologi dan konsep

FlexBox menata letak itemnya dalam garis horizontal atau vertikal. Arah garis ini menentukan sumbu utama. 90 derajat ke sumbu utama adalah sumbu silang. Panjang FlexBox di sepanjang sumbu utama disebut sebagai ukuran utama. Panjang sumbu silang yang sesuai dikenal sebagai ukuran silang. Ukuran dan sumbu ini menjadi dasar perilaku FlexBox.

Menerapkan properti

Anda dapat menerapkan properti FlexBox dengan dua cara:

• Ke container 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 ekstra dari ukuran silang jika ada beberapa baris rowGap / columnGap - menambahkan spasi di antara item dan baris Lihat Menetapkan perilaku container untuk mengetahui informasi selengkapnya tentang properti ini.

basis - ukuran item sebelum ruang tambahan dari ukuran utama didistribusikan grow - bagian ruang ekstra dari ukuran utama yang harus diterima item ini shrink - bagian defisit ruang dari ukuran utama yang harus diterima item ini alignSelf - cara mendistribusikan ruang ekstra dari ukuran silang ke item ini, menggantikan 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 untuk semua kemungkinan ukuran.

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 muat di ruang yang tersisa pada baris saat ini. Jika demikian, tempatkan anak ini ke dalam antrean. Jika tidak, tempatkan item ke baris baru jika penggabungan diaktifkan, atau tempatkan item ke baris saat ini yang akan meluap (item akan sebagian tertutup oleh tepi penampung).

4. Menyejajarkan atau mengubah ukuran item di sumbu utama: Untuk setiap baris, distribusikan ruang tambahan ke atau di antara item dengan mengubah ukuran atau menyejajarkannya.

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

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