Propiedad flex-wrap de CSS
La propiedad flex-wrap define si los elementos flexibles deben envolver o no. En otras palabras, define si los elementos se fuerzan a una sola línea o si pueden fluir en múltiples líneas.
Si no hay elementos flexibles, la propiedad flex-wrap no tendrá ningún efecto.
La propiedad flex-wrap es una de las propiedades de CSS3.
| Valor inicial | nowrap |
|---|---|
| Se aplica a | Contenedores flex. |
| Heredable | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.flexWrap = "wrap-reverse"; |
Sintaxis
Sintaxis de la propiedad flex-wrap de CSS
css
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;Ejemplo de la propiedad flex-wrap con el valor "wrap":
Ejemplo de la propiedad CSS flex-wrap con el valor wrap
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.wrap {
width: 200px;
height: 200px;
border: 1px solid #cccccc;
display: flex;
flex-wrap: wrap;
}
.wrap div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>The flex-wrap Property</h2>
<div class="wrap">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
</body>
</html>Ejemplo de la propiedad flex-wrap con el valor "nowrap":
Ejemplo de la propiedad CSS flex-wrap con el valor nowrap
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-wrap property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Resultado
Ejemplo de la propiedad flex-wrap con el valor "wrap-reverse":
Ejemplo de la propiedad CSS flex-wrap con el valor wrap-reverse
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap-reverse;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-wrap property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Valores
| Valor | Descripción | Probar |
|---|---|---|
| nowrap | Define que los elementos flexibles no se envolverán. Este es el valor predeterminado de esta propiedad. | Probar » |
| wrap | Define que los elementos flexibles se envolverán cuando sea necesario. | Probar » |
| wrap-reverse | Define que los elementos flexibles se envolverán en orden inverso cuando sea necesario. | Probar » |
| initial | Hace que la propiedad use su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad de su elemento padre. |
Práctica
¿Cuál es el propósito de la propiedad 'flex-wrap' en CSS?