flex-wrap
=========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
A propriedade CSS **`flex-wrap`** define se os itens flexíveis são forçados a ficarem na mesma linha ou se podem ser quebradas em varias linhas. Se o argumento for valido, ele define a direção em que as linhas são empilhadas.

Experimente
-----------

Veja Using CSS flexible boxes para mais propriedades e informação.

Syntax
------


```css
flex-wrap: nowrap; /\* Default value \*/
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/\* Global values \*/
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: unset;
```


A propriedade `flex-wrap` é especificada como uma unica palavra-chave escolhida na lista de valores abaixo.

### Valores

Os seguintes valores são aceitos :

`nowrap`

Os itens flexíveis são agrupados em uma unica linha, o que pode fazer com que o flex container transborde. O **cross-start** é equivalente ao **início** ou **antes**, dependendo do valor da `flex-direction`. Este é o valor padrão.

`wrap`

Os itens flexíveis são quebrados em multiplas linhas. O **cross-start** é equivalente a iniciar ou antes dependendo do valor do `flex-direction` e **cross-end** é o oposto do especificado **cross-start**.

`wrap-reverse`

Se comporta da mesma maneira que o `wrap` mas a de linha ocorre na direção contrária, ou seja, para a linha acima.

Formal definição
----------------

|  |  |
| --- | --- |
| Initial value | `nowrap` |
| Aplica-se a | flex containers |
| Inherited | não |
| Computed value | as specified |
| Animation type | discrete |

Formal syntax
-------------
```

flex-wrap =   
  nowrap        | (en-US)  
  wrap          | (en-US)  
  wrap-reverse    
  
```

Exemplos
--------

### Definindo valores em um flex container wrap

#### HTML


```html
<h4>This is an example for flex-wrap:wrap</h4>
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap</h4>
<div class="content1">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse</h4>
<div class="content2">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
```


#### CSS


```css
/\* Common Styles \*/
.content,
.content1,
.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  text-align: center;
}

.content div,
.content1 div,
.content2 div {
  height: 50%;
  width: 300px;
}
.red {
  background: orangered;
}
.green {
  background: yellowgreen;
}
.blue {
  background: steelblue;
}

/\* Flexbox Styles \*/
.content {
  display: flex;
  flex-wrap: wrap;
}
.content1 {
  display: flex;
  flex-wrap: nowrap;
}
.content2 {
  display: flex;
  flex-wrap: wrap-reverse;
}
```


#### Resultados

Especificações
--------------

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-wrap-property |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Guia CSS Flexbox: *Basic Concepts of Flexbox*
* Guia CSS Flexbox: *Mastering wrapping of flex items (en-US)*