Sifa flex-wrap

Sifa flex-wrap inaweka vizuizi vya mstari mwingi kwenye mhimili mkuu. Inatumika kwa kipengele kizazi cha vizuizi vya flex. Imojumuishwa kwenye sifa iliyofupishwa flex-flow.

Kiendeshaji

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

Thamani

Thamani	Maelezo
`nowrap`	Hali ya mstari mmoja - vizuizi vimepangwa kwenye mstari mmoja.
`wrap`	Vizuizi vimepangwa kwenye mistari kadhaa, ikiwa havitoshiki kwenye mstari mmoja.
`wrap-reverse`	Kama `wrap`, lakini vizuizi vimepangwa kwa mpangilio tofauti (kwanza la mwisho, kisha la kwanza).

Thamani chaguomsingi: nowrap.

Mfano . Thamani wrap

Sasa vizuizi havitoshi kwenye chombo chake na vitapangika kwenye mistari kadhaa:

<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;
}

Mfano . Thamani wrap-reverse

Sasa mpangilio utabadilika kuwa kinyume (angalia nambari ndani ya vizuizi):

<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;
}

Mfano . Thamani nowrap

Sasa vizuizi vitapangika kwenye hali ya mstari mmoja (hiyo ndiyo chaguomsingi). Wakati huo thamani ya upana width kwa vizuizi itapuuzwa, ikiwa inakwamisha vizuizi kutoshea kwenye mzazi. Zingatia kuwa vizuizi vimetoshea kwenye mzazi, lakini upana wao halisi si 100px, kama ulivyowekwa, bali ni kidogo:

<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;
}

Mfano . Thamani nowrap

Hata hivyo, ikiwa vizuizi vinatoshea kwa upana uliowekwa - basi sifa width haitapuuzwa. Punguza idadi ya vizuizi ili vyote vinaweza kutoshea:

<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;
}

Angalia pia

sifa flex-direction,
ambayo inaweka mwelekeo wa mihimili ya vizuizi vya flex
sifa justify-content,
ambayo inaweka mpangilio kwenye mhimili mkuu
sifa align-items,
ambayo inaweka mpangilio kwenye mhimili wa pili
sifa flex-flow,
ufupisho wa flex-direction na flex-wrap
sifa order,
ambayo inaweka mpangilio wa vizuizi vya flex
sifa align-self,
ambayo inaweka mpangilio wa kizuizi kimoja
sifa flex-basis,
ambayo inaweka ukubwa wa kizuizi maalum cha flex
sifa flex-grow,
ambayo inaweka ukubwa wa kukua kwa vizuizi vya flex
sifa flex-shrink,
ambayo inaweka ukubwa wa kukunjwa kwa vizuizi vya flex
sifa flex,
ufupisho wa flex-grow, flex-shrink na flex-basis