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