Свойство flex-wrap

Свойство flex-wrap блокларни бош ўқ бўйлаб кўп қatorли жойлаштиришни белгилайди. Флекс блоклар учун ота-она элементига қўлланилади. flex-flow қисқартирилган свойствага киради.

Синтаксис

селектор {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

Қийматлар

Қиймат	Тасниф
`nowrap`	Бир қatorли режим - блоклар битта қatorга жойлашади.
`wrap`	Блоклар битта қatorга сиғмаса, бир неча қatorга жойлашади.
`wrap-reverse`	`wrap` каби, лекин блоклар бошқа тартибда жойлашади (аввал охирги, кейин биринчи).

Стандарт қиймат: nowrap.

Мисол . Wrap қиймати

Ҳозир блоклар ўз контейнерига сиғмайди ва бир неча қatorга жойлашади:

<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 қиймати

Ҳозир блоклар бир қatorли режимда жойлашади (стандарт холда). Бу ҳолатда блоклар учун width эни қиймати эътиборга олинмайди, агар у блокларни ота-онага сиғишига халал берилса. Блоклар ота-онага сиғаётганига, лекин уларнинг ҳақиқий эни 100px эмас, бalki кичкинароқ эканлигига эътибоp беринг:

<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 свойства эътиборга олинади. Блоклар сонini камайтириб, уларнинг ҳаммаси сиғадиган қилинг:

<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 свойства,
флекс блоклар ўқлари йўналишини белгилайди
justify-content свойства,
бош ўқ бўйича текислашни белгилайди
align-items свойства,
кўндаланг ўқ бўйича текислашни белгилайди
flex-flow свойства,
flex-direction ва flex-wrap учун қисқартириш
order свойства,
флекс блоклар тартибини белгилайди
align-self свойства,
бир блокни текислашни белгилайди
flex-basis свойства,
белгиланган флекс блок ўлчамини белгилайди
flex-grow свойства,
флекс блоклар ochko'zligini белгилайди
flex-shrink свойства,
флекс блоклар қисқариш имконини белгилайди
flex свойства,
flex-grow, flex-shrink ва flex-basis учун қисқартириш