---
id: 587d78ad367417b2b2512afa
title: Use the flex-wrap Property to Wrap a Row or Column
challengeType: 0
videoUrl: ''
localeTitle: Utilice la propiedad flex-wrap para envolver una fila o columna
---
## Description
CSS flexbox tiene una función para dividir un elemento flexible en varias filas (o columnas). Por defecto, un contenedor flexible encajará todos los elementos flexibles juntos. Por ejemplo, una fila estará en una sola línea. Sin embargo, al usar la propiedad flex-wrap
, le dice a CSS que envuelva los elementos. Esto significa que los elementos adicionales se mueven a una nueva fila o columna. El punto de ruptura de donde ocurre la envoltura depende del tamaño de los artículos y del tamaño del contenedor. CSS también tiene opciones para la dirección de la envoltura: -
nowrap
: esta es la configuración predeterminada y no envuelve los elementos. -
wrap
: envuelve los elementos de izquierda a derecha si están en una fila, o de arriba a abajo si están en una columna. -
wrap-reverse
: envuelve los elementos de abajo a arriba si están en una fila, o de derecha a izquierda si están en una columna.
## Instructions
El diseño actual tiene demasiados cuadros para una fila. Agregue la propiedad CSS flex-wrap
al elemento #box-container
y asígnele un valor de wrap.
## Tests
```yml
tests:
- text: 'El elemento #box-container
debería tener la propiedad flex-wrap
establecida en un valor de wrap.'
testString: 'assert($("#box-container").css("flex-wrap") == "wrap", "The #box-container
element should have the flex-wrap
property set to a value of wrap.");'
```
## Challenge Seed
## Solution
```js
// solution required
```