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 үшін қысқарту