Хосияти flex-wrap

Хосияти flex-wrap чойгиркунии серсатри блокҳо дар меҳвари асосиро муайян мекунад. Ба элемент-волидайн барои блокҳои flex татбиқ мешавад. Дар хосияти ихтисоркардаи flex-flow дохил мешавад.

Синтаксис

интихобкунанда {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

Қиматҳо

Қимат	Тавсиф
`nowrap`	Реҷаи яксатира - блокҳо дар як сатр ҷойгир мешаванд.
`wrap`	Блокҳо дар чанд сатр ҷойгир мешаванд, агар дар як сатр ҷой нашаванд.
`wrap-reverse`	Ҳамон, ки `wrap`, аммо блокҳо дар тартиби дигар ҷойгир мешаванд (аввал охирин, баъд якум).

Қимати пешфарз: nowrap.

Намуна . Қимати wrap

Акнун блокҳо дар контейнерашон ҷой намешаванд ва дар чанд сатр ҷойгир мешаванд:

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

Намуна . Қимати wrap-reverse

Ва акнун тартиби пайравӣ ба баръакс иваз мешавад (ба рақамҳо дар дохили блокҳо нигаред):

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

Намуна . Қимати nowrap

Акнун блокҳо дар реҷаи яксатира ҷойгир карда мешаванд (ҳамчун пешфарз). Ҳангоми ин қимати паҳноӣ width барои блокҳо нодида гирифта мешавад, агар он барои ҷойгир шудани блокҳо дар волидайн монеъ шавад. Ба ин диққат диҳед, ки блокҳо дар волидайн ҷой гирифтанд, вале паҳноии воқеии онҳо 100px нест, ҳарчанд ба онҳо муайян карда шудааст, балки камтар:

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

Намуна . Қимати nowrap

Аммо, агар блокҳо дар паҳноии муайянкардаи онҳо ҷой гиранд - хосияти width нодида гирифта намешавад. Миқдори блокҳоро кам мекунем, то ки ҳама ворид шаванд:

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

Инчунин бинед

хосияти flex-direction,
ки самти меҳварҳои блокҳои flex-ро муайян мекунад
хосияти justify-content,
ки ҳамворкуниро дар меҳвари асосӣ муайян мекунад
хосияти align-items,
ки ҳамворкуниро дар меҳвари амудӣ муайян мекунад
хосияти flex-flow,
ихтисор барои flex-direction ва flex-wrap
хосияти order,
ки тартиби блокҳои flex-ро муайян мекунад
хосияти align-self,
ки ҳамворкунии як блокро муайян мекунад
хосияти flex-basis,
ки андозаи блоки муайяни flex-ро муайян мекунад
хосияти flex-grow,
ки ҳарисӣ (тамаъ)-и блокҳои flex-ро муайян мекунад
хосияти flex-shrink,
ки фишорпазирӣ (куҳишпазирӣ)-и блокҳои flex-ро муайян мекунад
хосияти flex,
ихтисор барои flex-grow, flex-shrink ва flex-basis