Properti flex-wrap

Properti flex-wrap mengatur penempatan blok multi-baris sepanjang sumbu utama. Diterapkan ke elemen induk untuk blok flex. Termasuk dalam properti singkatan flex-flow.

Sintaks

selektor {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

Nilai

Nilai	Deskripsi
`nowrap`	Mode satu baris - blok disusun dalam satu baris.
`wrap`	Blok disusun dalam beberapa baris, jika tidak muat dalam satu baris.
`wrap-reverse`	Sama seperti `wrap`, tetapi blok disusun dalam urutan terbalik (pertama yang terakhir, kemudian yang pertama).

Nilai default: nowrap.

Contoh . Nilai wrap

Sekarang blok tidak muat dalam kontainernya dan akan disusun dalam beberapa baris:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Contoh . Nilai wrap-reverse

Dan sekarang urutan susunannya akan berubah menjadi terbalik (perhatikan angka di dalam blok):

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: wrap-reverse;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Contoh . Nilai nowrap

Sekarang blok akan ditempatkan dalam mode satu baris (seperti default). Dalam hal ini, nilai lebar width untuk blok akan diabaikan, jika itu menghalangi blok untuk muat di dalam induknya. Perhatikan bahwa blok muat di dalam induknya, tetapi lebar sebenarnya bukan 100px, seperti yang ditetapkan, tetapi lebih kecil:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Contoh . Nilai nowrap

Namun, jika blok muat dengan lebar yang ditetapkan untuk mereka - maka properti width tidak akan diabaikan. Mari kurangi jumlah blok sehingga semuanya muat:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Lihat juga

properti flex-direction,
yang mengatur arah sumbu blok flex
properti justify-content,
yang mengatur perataan sepanjang sumbu utama
properti align-items,
yang mengatur perataan sepanjang sumbu silang
properti flex-flow,
singkatan untuk flex-direction dan flex-wrap
properti order,
yang mengatur urutan blok flex
properti align-self,
yang mengatur perataan satu blok
properti flex-basis,
yang mengatur ukuran blok flex tertentu
properti flex-grow,
yang mengatur sifat "rakus" blok flex
properti flex-shrink,
yang mengatur sifat menyusut blok flex
properti flex,
singkatan untuk flex-grow, flex-shrink dan flex-basis