---
id: 587d78ad367417b2b2512afa
title: Use the flex-wrap Property to Wrap a Row or Column
challengeType: 0
videoUrl: ''
localeTitle: Use a propriedade flex-wrap para agrupar uma linha ou coluna
---
## Description
Flexbox CSS tem um recurso para dividir itens flexíveis em várias linhas (ou colunas). Por padrão, um contêiner flexível acomodará todos os itens flexíveis juntos. Por exemplo, uma row
(linha) estará toda em uma linha.
No entanto, usando a propriedade flex-wrap
, faz com que o CSS agrupe os itens. Isso significa que itens extras são movidos para uma nova linha ou coluna. O ponto onde haverá a quebra depende do tamanho dos itens e do tamanho do contêiner.
CSS também tem opções para a direção do agrupamento: -
nowrap
: esta é a configuração padrão e não agrupa os itens. -
wrap
: agrupa os itens da esquerda para a direita, se estiverem em uma linha ou de cima para baixo, se estiverem em uma coluna. -
wrap-reverse
: agrupa os itens de baixo para cima, se estiverem em uma linha, ou da direita para a esquerda, se estiverem em uma coluna.
## Instructions
O layout atual tem muitas caixas para uma só linha. Adicione a propriedade CSS flex-wrap
ao elemento #box-container
e atribua a ela um valor de wrap
.
## Tests
```yml
tests:
- text: 'O elemento #box-container
deve ter a propriedade flex-wrap
definida como um 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
```