Properti flex-wrapini adalah sub-hak milik modul Flexible Box Layout.
Ini menentukan sama ada item flex dipaksa dalam satu baris atau boleh dialirkan ke beberapa baris. Sekiranya diatur ke beberapa garisan, ia juga menentukan paksi silang yang menentukan arah garis baru ditumpuk.
Peringatan: paksi silang adalah paksi tegak lurus dengan paksi utama. Arahnya bergantung pada arah paksi utama.
Tempat flex-wrappenginapan ini menerima 3 nilai yang berbeza:
nowrap( lalai ): satu baris yang boleh menyebabkan bekas melimpahwrap: pelbagai baris, arah ditentukan olehflex-directionwrap-reverse: pelbagai baris, bertentangan dengan arah yang ditentukan olehflex-direction
Sintaks
flex-wrap: nowrap | wrap | wrap-reverse .flex-container ( flex-wrap: wrap; )Demo
Dalam demo berikut:
- Senarai merah ditetapkan ke
nowrap - Senarai kuning ditetapkan ke
wrap - Senarai biru ditetapkan ke
wrap-reverse
Nota: flex-directionditetapkan dengan nilai piawai: row.
Lihat Pen Flex-wrap: demo oleh CSS-Tricks (@ css-tricks) di CodePen.
Sokongan Penyemak Imbas
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 21 * | 28 | 11 | 12 | 6.1 * |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 * |
Untuk maklumat lebih lanjut mengenai cara mencampurkan sintaks untuk mendapatkan sokongan penyemak imbas terbaik, sila rujuk artikel ini (Trik CSS) atau artikel ini (DevOpera).