Propiedad flex-wrap

La propiedad flex-wrap establece la disposición multilínea de bloques a lo largo del eje principal. Se aplica al elemento contenedor (padre) de los elementos flexibles. Forma parte de la propiedad abreviada flex-flow.

Sintaxis

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

Valores

Valor	Descripción
`nowrap`	Modo de una sola línea - los bloques se disponen en una sola fila.
`wrap`	Los bloques se disponen en varias líneas si no caben en una.
`wrap-reverse`	Lo mismo que `wrap`, pero los bloques se disponen en orden inverso (primero el último, luego el primero).

Valor por defecto: nowrap.

Ejemplo . Valor wrap

Ahora los bloques no caben en su contenedor y se dispondrán en varias líneas:

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

Ejemplo . Valor wrap-reverse

Y ahora el orden de seguimiento cambiará al inverso (observa los números dentro de los bloques):

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

Ejemplo . Valor nowrap

Ahora los bloques se colocarán en modo de una sola línea (así es por defecto). En este caso, el valor de anchura width para los bloques será ignorado, si impide que los bloques quepan en el contenedor padre. Observa que los bloques caben en el contenedor padre, pero su anchura real no es 100px, como se les asignó, sino 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;
}

Ejemplo . Valor nowrap

Sin embargo, si los bloques caben con el ancho asignado, entonces la propiedad width no será ignorada. Reduzcamos la cantidad de bloques para que todos quepan:

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

Ver también

propiedad flex-direction,
que establece la dirección de los ejes de los bloques flexibles
propiedad justify-content,
que establece la alineación a lo largo del eje principal
propiedad align-items,
que establece la alineación a lo largo del eje transversal
propiedad flex-flow,
abreviatura para flex-direction y flex-wrap
propiedad order,
que establece el orden de los bloques flexibles
propiedad align-self,
que establece la alineación de un solo bloque
propiedad flex-basis,
que establece el tamaño de un bloque flexible específico
propiedad flex-grow,
que establece la capacidad de expansión de los bloques flexibles
propiedad flex-shrink,
que establece la capacidad de contracción de los bloques flexibles
propiedad flex,
abreviatura para flex-grow, flex-shrink y flex-basis