flex-wrap

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

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.

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

Syntax

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 valuenowrap
Aplica-se aflex containers
Inheritednão
Computed valueas specified
Animation typediscrete

Formal syntax

nowrap | wrap | wrap-reverse

Examplos

Definindo valores em um flex container wrap

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

/* 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ção

Specification Status Comment
CSS Flexible Box Layout Module
The definition of 'flex-wrap' in that specification.
Candidata a Recomendação

Compatibilidade com navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
flex-wrapChrome Full support 29
Full support 29
Full support 21
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 28IE Partial support 11
Notes
Partial support 11
Notes
Notes Partial support due to large number of bugs present. See Flexbugs.
Opera Full support 17Safari Full support 9
Full support 9
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 4.4
Full support 4.4
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 29
Full support 29
Full support 25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 52Opera Android Full support 18Safari iOS Full support 9
Full support 9
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 2.0
Full support 2.0
Full support 1.5
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-

Legend

Full support  
Full support
Partial support  
Partial support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Veja também