Secara default, container flex memaksa semua item berada dalam satu baris: bila ruang kurang, item tidak pindah baris melainkan menyusut agar muat. Perilaku ini sering mengejutkan — deret chip yang tadinya rapi mendadak dipipihkan di layar kecil. Property flex-wrap memberi kita kendali atas kejadian itu: satu nilai untuk membiarkan item menyusut, dan satu untuk mengizinkan baris baru terbentuk.
Tiga Nilai flex-wrap #
| Nilai | Perilaku |
|---|---|
nowrap (default) | Semua item dipaksa satu baris; item menyusut bila ruang kurang |
wrap | Item boleh pindah ke baris baru; baris baru tersusun di bawah baris sebelumnya |
wrap-reverse | Sama seperti wrap, tetapi baris baru bertumpuk ke atas |
Perhatikan bahwa flex-wrap dideklarasikan pada container, sama seperti flex-direction. Keduanya kerap ditulis berdampingan karena menentukan struktur baris sebelum perataan bekerja.
.daftar-chip {
display: flex;
flex-wrap: wrap;
gap: 10px;
}Demo berikut membandingkan nowrap dan wrap pada delapan chip yang sama persis:
Nilai gap: 10px pada contoh berlaku baik antar chip maupun antar baris hasil wrapnya.
Mengapa Item Bisa Menyusut #
Mekanisme di balik nowrap: ketika total lebar item melebihi container, flexbox memampatkan item di sepanjang main axis sampai semua muat dalam satu baris. Batas penyusutannya adalah lebar minimum konten (min-content) — teks bisa patah per kata, dan itu menjelaskan mengapa chip berlabel panjang tiba-tiba menjadi dua baris teks.
Ada satu nuansa terkenal di sini: beberapa item menolak menyusut melewati lebar kontennya — gambar dan teks tanpa titik patah adalah contohnya — sehingga baris nowrap bisa meluap keluar container. Penyebabnya adalah min-width: auto pada flex item, dan cara mengendalikannya akan dibahas tuntas pada bagian kedua section ini bersama flex-shrink. Untuk sekarang cukup diingat: bila baris mendadak meluap, tiga nilai flex-wrap adalah alat pertama yang perlu dicoba.
wrap Membuka Pola Baris Kedua #
Dengan wrap, container berhenti menjadi barisan kaku dan mulai menyerupai papan yang menampung baris demi baris:
- Deret chip dan tag filter yang panjangnya tak terduga.
- Galeri produk yang jumlahnya bergantung lebar layar.
- Baris kartu yang menyesuaikan konten tanpa JavaScript.
wrap-reverse jarang dibutuhkan: baris baru tampil di atas baris lama sehingga urutan visual terbalik. Kasus paling wajar adalah daftar kronologis terbaru di atas — meskipun untuk itu, membalik urutan data di sisi markup biasanya lebih jelas daripada membalik sumbu visual.
Dua interaksi layak dicatat. Pertama, justify-content bekerja per baris: dengan space-between, baris terakhir yang berisi dua item tetap menempel kiri, bukan terpisah ke dua ujung — perilaku yang justru kita inginkan pada galeri. Kedua, kombinasi flex-direction: column dengan wrap juga sah: item yang meluap vertikal pindah ke kolom berikutnya, meskipun pola ini jarang dibutuhkan karena butuh batas tinggi eksplisit pada container.
Kesalahan Umum #
| Gejala | Penyebab | Perbaikan |
|---|---|---|
| Item menyusut dan teksnya patah di layar kecil | nowrap default yang memaksa satu baris | Tambahkan flex-wrap: wrap pada container |
| Baris meluap keluar container | Item menolak menyusut melewati lebar kontennya (min-width: auto) | Coba wrap, atau tunggu pembahasan flex-shrink dan min-width: 0 |
| Urutan baris terasa terbalik | Tanpa sengaja memakai wrap-reverse | Ganti ke wrap |
Ringkasan #
flex-wrap menentukan nasib item yang tidak muat: nowrap memampatkannya dalam satu baris, wrap mengizinkan baris baru di bawah, dan wrap-reverse menumpuk ke atas. Property ini dikelola container dan menjadi fondasi pola daftar yang panjangnya dinamis. Baris-baris yang terbentuk pun membutuhkan aturan main sendiri — dan untuk mengaturnya kita berpindah ke properti distribusi ruang paling populer di Flexbox: justify-content.