FlexBox

Catatan: FlexBox saat ini adalah API eksperimental dan kemungkinan akan berubah pada masa mendatang. Laporkan masalah apa pun di issue tracker.

FlexBox adalah penampung yang mengatur tata letak item dalam satu arah. Tata letak ini dapat mengubah ukuran, melipat, 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 cara item bertambah besar dan mengecil untuk mengisi ruang yang tersedia
• Menggabungkan 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 sejumlah besar item, gunakan daftar dan petak lambat. Jika Anda perlu membungkus item, gunakan FlexBox, bukan FlowRow dan FlowColumn.

Terminologi dan konsep

Poin Penting: FlexBox sangat dipengaruhi oleh spesifikasi Tata Letak Kotak Fleksibel CSS dan memiliki konsep, terminologi, dan perilaku yang hampir identik. Jika Anda sudah terbiasa dengan display: flex, Anda akan menemukan properti dan perilaku FlexBox hampir sama.

FlexBox menata 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 dikenal sebagai ukuran utama. Panjang sumbu silang yang sesuai dikenal sebagai ukuran silang. Ukuran dan sumbu ini membentuk dasar perilaku FlexBox.

Gambar 1. Sumbu dan ukuran saat arah FlexBox adalah Row.

Gambar 2. Sumbu dan ukuran saat arah FlexBox adalah Column.

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 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 ekstra dari ukuran utama didistribusikan grow - bagian ruang ekstra dari ukuran utama yang harus diterima item ini shrink - pangsa kekurangan 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 paling sesuai dengan ruang yang tersedia. Memahami cara kerja FlexBox 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. Urutkan turunan: Urutkan turunan menurut nilai order, jika ada.

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

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

5. Menyejajarkan atau mengubah ukuran item dalam sumbu silang: Untuk setiap baris, distribusikan ruang ekstra ke atau di antara item dan baris dengan meregangkan atau menyejajarkan item dan baris tersebut.

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