Sifat flex-wrap

Sifat flex-wrap menetapkan penjajaran blok berbilang baris pada paksi utama. Digunakan pada elemen induk untuk blok flex. Termasuk dalam sifat singkatan flex-flow.

Sintaks

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

Nilai

Nilai	Keterangan
`nowrap`	Mod 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 sekali yang terakhir, kemudian yang pertama).

Nilai lalai: 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 susunan akan berubah menjadi terbalik (lihat nombor 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 disusun dalam mod satu baris (seperti lalai). Dalam kes ini, nilai lebar width untuk blok akan diabaikan, jika ia menghalang blok daripada muat dalam induk. Perhatikan bahawa blok muat dalam induk, tetapi lebar sebenar mereka 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

Walau bagaimanapun, jika blok muat dengan lebar yang ditetapkan - maka sifat width tidak akan diabaikan. Kurangkan bilangan blok supaya 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

sifat flex-direction,
yang menetapkan arah paksi blok flex
sifat justify-content,
yang menetapkan penjajaran pada paksi utama
sifat align-items,
yang menetapkan penjajaran pada paksi silang
sifat flex-flow,
singkatan untuk flex-direction dan flex-wrap
sifat order,
yang menetapkan urutan blok flex
sifat align-self,
yang menetapkan penjajaran satu blok
sifat flex-basis,
yang menetapkan saiz blok flex tertentu
sifat flex-grow,
yang menetapkan ketamakan blok flex
sifat flex-shrink,
yang menetapkan kebolehkecutan blok flex
sifat flex,
singkatan untuk flex-grow, flex-shrink dan flex-basis