Својство 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