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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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 value | nowrap |
---|---|
Aplica-se a | flex containers |
Inherited | não |
Computed value | as specified |
Animation type | discrete |
Formal syntax
Exemplos
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
Especificação | Status | Comentário |
---|---|---|
CSS Flexible Box Layout Module The definition of 'flex-wrap' in that specification. |
Candidata a Recomendação |
Compatibilidade com navegadores
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Veja também
- Guia CSS Flexbox: Basic Concepts of Flexbox
- Guia CSS Flexbox: Mastering wrapping of flex items