The flex-wrapproperti adalah sub-properti dari modul Fleksibel Box Layout.
Ini menentukan apakah item fleksibel dipaksa dalam satu baris atau dapat dialirkan ke beberapa baris. Jika diatur ke beberapa baris, itu juga menentukan sumbu silang yang menentukan arah baris baru ditumpuk.
Pengingat: sumbu silang adalah sumbu tegak lurus dengan sumbu utama. Arahnya tergantung dari arah sumbu utama.
The flex-wrapproperti menerima 3 nilai yang berbeda:
nowrap( default ): satu baris yang dapat menyebabkan penampung meluapwrap: multi-garis, arah ditentukan olehflex-directionwrap-reverse: banyak garis, berlawanan dengan arah yang ditentukan olehflex-direction
Sintaksis
flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )Demo
Dalam demo berikut:
- Daftar merah diatur ke
nowrap - Daftar kuning disetel ke
wrap - Daftar biru disetel ke
wrap-reverse
Catatan: flex-directiondiatur ke nilai default: row.
Lihat Pen Flex-wrap: demo oleh CSS-Tricks (@ css-trick) di CodePen.
Dukungan Browser
Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.
Desktop
| Chrome | Firefox | YAITU | Tepi | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6.1 * |
Ponsel / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 * |
Untuk informasi lebih lanjut tentang cara mencampur sintaks untuk mendapatkan dukungan browser terbaik, silakan lihat artikel ini (Trik CSS) atau artikel ini (DevOpera).