Свойство flex-wrap задает многострочную расстановку блоков по главной оси.

Применяется к: родительскому элементу для flex блоков.

Входит в свойство-сокращение flex-flow.

См. все flexbox свойства: flex-direction, justify-content, align-items, flex-wrap, flex-flow, align-self, order, flex-basis, flex-grow, flex-shrink, flex.

Синтаксис

селектор {
	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 {
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	display: flex;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

1
2
3
4
5
6
7
8
9

Пример . Значение 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 {
	flex-wrap: wrap-reverse;
	flex-direction: row;
	justify-content: space-between;
	display: flex;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

1
2
3
4
5
6
7
8
9

Пример . Значение 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 {
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	display: flex;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

1
2
3
4
5
6
7
8
9

Однако, если блоки помещаются при заданной им ширине - то свойство width не будет проигнорировано. Уменьшим количество блоков так, чтобы они все влезли:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>
#parent {
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	display: flex;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

1
2
3