Propriedade CSS flex-wrap
A propriedade CSS flex-wrap define se os itens devem quebrar linha ou não. Veja exemplos com diferentes valores.
A propriedade flex-wrap controla se os itens em um flex container são forçados a permanecer em uma única linha ou podem quebrar para múltiplas linhas. Por padrão, um flex container tenta encaixar todos os seus itens em uma linha, mesmo que isso signifique encolhê-los ou deixá-los transbordar. Definir flex-wrap: wrap permite que os itens fluam para novas linhas quando não há espaço suficiente.
Esta é a propriedade que você usa sempre que uma linha de cards, tags ou links de navegação deve se reorganizar graciosamente em telas estreitas em vez de transbordar ou ser espremida.
flex-wrap afeta apenas elementos que são flex items, portanto não tem efeito a menos que o elemento pai tenha display: flex (ou display: inline-flex). Se um flex container não tiver itens, a propriedade não faz nada.
A propriedade flex-wrap é uma das propriedades CSS3, e ela se combina estreitamente com flex-direction: juntas, são comumente escritas como o shorthand flex-flow.
Este capítulo explica cada valor de flex-wrap, como a quebra de linha interage com o eixo principal e os pontos de atenção que você deve observar.
| Valor Inicial | nowrap |
|---|---|
| Aplica-se a | Flex containers. |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.flexWrap = "wrap-reverse"; |
Como a quebra de linha funciona
A quebra de linha ocorre ao longo do eixo transversal, perpendicular ao eixo principal definido por flex-direction:
- Com o
flex-direction: rowpadrão, os itens são dispostos da esquerda para a direita. Quandoflex-wrap: wrapestá ativo e os itens ficam sem espaço horizontal, o próximo item começa em uma nova linha abaixo. - Com
flex-direction: column, os itens se empilham de cima para baixo, e a quebra de linha empurra os itens que transbordam para uma nova coluna ao lado da primeira.
Uma consequência importante: quando flex-wrap é nowrap (o padrão), os flex items encolhem para caber no container (o flex-shrink entra em ação) ou transbordam. Somente quando a quebra de linha é permitida é que os itens mantêm seu tamanho preferido e se movem para uma nova linha.
Quando os itens quebram para várias linhas, o espaço entre essas linhas é controlado por align-content, enquanto o alinhamento dos itens dentro de uma única linha é controlado por align-items. Em uma única linha sem quebra, align-content não tem efeito.
Sintaxe
Sintaxe da propriedade CSS flex-wrap
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;Exemplo da propriedade flex-wrap com o valor "wrap":
O container abaixo tem 200px de largura e contém seis caixas de 50px de largura (300px de conteúdo). Com flex-wrap: wrap, as caixas que não cabem na primeira linha passam para uma segunda linha em vez de encolher:
Exemplo da propriedade CSS flex-wrap com o valor wrap
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.wrap {
width: 200px;
height: 200px;
border: 1px solid #cccccc;
display: flex;
flex-wrap: wrap;
}
.wrap div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>The flex-wrap Property</h2>
<div class="wrap">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
</body>
</html>Exemplo da propriedade flex-wrap com o valor "nowrap":
Com o valor padrão nowrap, as mesmas seis caixas são forçadas a permanecer em uma única linha. Como não cabem todas, elas são espremidas para uma largura menor do que os 50px declarados:
Exemplo da propriedade CSS flex-wrap com o valor nowrap
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: nowrap;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-wrap property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Resultado
Exemplo da propriedade flex-wrap com o valor "wrap-reverse":
wrap-reverse também permite que os itens fluam para múltiplas linhas, mas inverte a direção do eixo transversal: as linhas se empilham para cima em vez de para baixo, fazendo com que a primeira linha apareça na parte inferior:
Exemplo da propriedade CSS flex-wrap com o valor wrap-reverse
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap-reverse;
}
.example div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<h2>Flex-wrap property example</h2>
<div class="example">
<div style="background-color: #8ebf42;">A</div>
<div style="background-color: #1c87c9;">B</div>
<div style="background-color: #cccccc;">C</div>
<div style="background-color: #666666;">D</div>
<div style="background-color: #4c4a4a;">E</div>
<div style="background-color: #c6c4c4;">F</div>
</div>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| nowrap | Define que os flex items não vão quebrar linha. Este é o valor padrão da propriedade. | Experimente » |
| wrap | Define que os flex items vão quebrar linha quando necessário. | Experimente » |
| wrap-reverse | Define que os flex items vão quebrar linha em ordem inversa quando necessário. | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
Shorthand flex-flow
Como flex-wrap é quase sempre definido junto com flex-direction, o CSS fornece o shorthand flex-flow para ambos ao mesmo tempo:
/* flex-direction flex-wrap */
flex-flow: row wrap;Isso é equivalente a escrever flex-direction: row; e flex-wrap: wrap; separadamente.
Propriedades relacionadas
display— definedisplay: flexno elemento pai para criar o flex container sobre o qualflex-wrapatua.flex-direction— define o eixo principal (linha ou coluna) em torno do qual a quebra de linha reorganiza os itens.align-content— distribui o espaço entre as linhas quebradas (só importa quando os itens quebram).justify-content— alinha os itens ao longo do eixo principal.flex— controla como os itens individuais crescem e encolhem para preencher cada linha.