Propriedade Flex Wrap
Última atualização: 2026-09-13
flex-wrap Propriedade Flex Wrap
A propriedade flex-wrap controla se os itens flex são forçados a ficar em uma única linha ou são quebrados em várias linhas. Seu valor padrão é nowrap, que mantém todos os itens em uma linha mesmo que sejam comprimidos ou transbordem o contêiner. Definir wrap faz os itens fluírem para a linha seguinte, o que é muito útil em layouts responsivos e em arranjos de cartões em várias colunas.
| Categoria | |
|---|---|
| Valor Inicial | nowrap |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
flex-wrap: nowrap | wrap | wrap-reverse;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
nowrap | wrap | wrap-reverse | Palavra-chave | Se os itens flex quebram de linha |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| flex-wrap | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Suportado em todos os principais navegadores | |||||
Dica： O wrap-reverse não apenas quebra as linhas, mas também inverte a ordem delas: a primeira linha aparece na parte inferior e a última na parte superior, enquanto a ordem dos itens dentro de cada linha permanece inalterada.
Importante： O align-content só tem efeito quando flex-wrap: wrap é definido. Ele controla o espaçamento e o alinhamento entre as linhas. Em uma única linha, o align-content não faz nada.
❓ Perguntas Frequentes
QPor que os itens ainda transbordam o contêiner com flex-wrap: wrap?
AItens com flex-basis ou width fixos ainda podem transbordar após a quebra de linha por causa do espaço extra adicionado por gap, padding, margin ou box-sizing. Use larguras em porcentagem, um cálculo calc() ou flex-basis: 0 combinado com flex-grow para que os itens dimensionem a si mesmos e compartilhem a largura do contêiner de forma uniforme, evitando o transbordamento por completo. Verifique também se um ancestral define min-width ou box-sizing que impede os itens de encolher abaixo do conteúdo, pois essas restrições interagem com o flex-basis.
QComo escolho entre nowrap e wrap para layouts responsivos?
AO nowrap serve para componentes compactos de linha única, como barras de navegação e barras de ferramentas. O wrap serve para listas de cartões, nuvens de tags e tudo o que deve fluir para novas linhas à medida que a tela estreita. Layouts responsivos geralmente preferem wrap para que o conteúdo quebre naturalmente, combinado com um flex-basis fixo ou um valor minmax para controlar a largura de cada item e garantir uma experiência móvel mais estável. Lembre-se de que min-width: auto pode impedir a quebra de uma palavra longa, então adicione min-width: 0 ou overflow-wrap para permitir a quebra das linhas.
QQual é a diferença entre flex-wrap: wrap-reverse e flex-wrap: wrap?
AAmbos permitem a quebra de linha; a diferença está na direção das linhas quebradas. O wrap coloca as novas linhas na direção positiva do eixo principal, então, em um layout em linha, as novas linhas aparecem abaixo. O wrap-reverse inverte o eixo cruzado, de modo que a primeira linha começa na parte inferior e as linhas se acumulam para cima, invertendo a ordem visual. O wrap-reverse raramente é necessário, e sua interação com align-content pode surpreender, então use wrap em layouts comuns.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Direção do Eixo Principal
Define a direção do eixo principal em um layout flex
Atalho Flex Flow
Atalho para flex-direction e flex-wrap
