Propriedade flex-wrap

A propriedade flex-wrap define a disposição multilinha de blocos ao longo do eixo principal. Aplica-se ao elemento pai para blocos flex. Faz parte da propriedade abreviada flex-flow.

Sintaxe

seletor {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

Valores

Valor	Descrição
`nowrap`	Modo de linha única - os blocos são dispostos em uma única linha.
`wrap`	Os blocos são dispostos em várias linhas, se não couberem em uma.
`wrap-reverse`	O mesmo que `wrap`, mas os blocos são dispostos em ordem inversa (primeiro o último, depois o primeiro).

Valor padrão: nowrap.

Exemplo . Valor wrap

Agora os blocos não cabem em seu contêiner e serão dispostos em várias linhas:

<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;
}

Exemplo . Valor wrap-reverse

E agora a ordem de sequência mudará para inversa (observe os números dentro dos blocos):

<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;
}

Exemplo . Valor nowrap

Agora os blocos serão dispostos no modo de linha única (assim por padrão). Neste caso, o valor de largura width para os blocos será ignorado, se impedir que os blocos caibam no pai. Observe que os blocos couberam no pai, mas sua largura real não é 100px, conforme definido, mas sim menor:

<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;
}

Exemplo . Valor nowrap

No entanto, se os blocos couberem com a largura definida para eles - então a propriedade width não será ignorada. Vamos reduzir o número de blocos para que todos caibam:

<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;
}

Veja também

a propriedade flex-direction,
que define a direção dos eixos dos blocos flex
a propriedade justify-content,
que define o alinhamento ao longo do eixo principal
a propriedade align-items,
que define o alinhamento ao longo do eixo transversal
a propriedade flex-flow,
abreviação para flex-direction e flex-wrap
a propriedade order,
que define a ordem dos blocos flex
a propriedade align-self,
que define o alinhamento de um único bloco
a propriedade flex-basis,
que define o tamanho de um bloco flex específico
a propriedade flex-grow,
que define a "ganância" dos blocos flex
a propriedade flex-shrink,
que define a compressibilidade dos blocos flex
a propriedade flex,
abreviação para flex-grow, flex-shrink e flex-basis