Atribut flex-wrap CSS

Definisi dan penggunaan

Atribut flex-wrap menentukan apakah item elasti harus berpindah baris atau tidak.

Komentar:Jika elemen bukan item elasti, atribut flex tidak berlaku.

Lihat juga:

Panduan pelajaran CSS: Kotak elasti CSS

Panduan referensi CSS:Atribut flex

Panduan referensi CSS:Atribut flex-basis

Panduan referensi CSS:Atribut flex-direction

Panduan referensi CSS:Atribut flex-flow

Panduan referensi CSS:Atribut flex-grow

Panduan referensi CSS:Atribut flex-shrink

Panduan HTML DOM:Atribut flexWrap

Contoh

Membuat item elasti berpindah baris saat diperlukan:

div {
  display: flex;   
  flex-wrap: wrap;
}

Coba sendiri

Syntaks CSS

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

Nilai atribut

Nilai Deskripsi
nowrap Nilai default. Menentukan bahwa item elasti tidak akan berpindah baris.
wrap Menentukan bahwa item elasti akan berpindah baris saat diperlukan.
wrap-reverse Menentukan bahwa item elasti akan berpindah baris saat diperlukan, dengan arah terbalik.
initial Setel atribut ini ke nilai default. Lihat initial.
inherit Mengambil atribut ini dari elemen orang tua. Lihat inherit.

Detil teknis

Nilai default: nowrap
Inheritance: Tidak
Pembuatan animasi: Tidak didukung. Lihat:Atribut animasi.
Versi: CSS3
Syntaks JavaScript: object.style.flexWrap="nowrap"

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini.

Angka yang ditunjukan dengan -webkit- atau -moz- menunjukkan versi awal yang menggunakan prefiks.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0