O que o flex-wrap faz?

flex-wrap controla se os itens flex permanecem em uma única linha ou se quebram em várias linhas quando não há espaço suficiente. O valor padrão nowrap força os itens em uma única linha e pode encolhê-los. wrap permite que os itens fluam para novas linhas, enquanto wrap-reverse os quebra em ordem inversa.

Playground CSS Flexbox

Q: Qual é a diferença entre justify-content e align-items?

justify-content controla o alinhamento ao longo do eixo principal (horizontal por padrão), enquanto align-items controla o alinhamento ao longo do eixo transversal (vertical por padrão). Quando você altera o flex-direction para column, os eixos se invertem: justify-content torna-se vertical e align-items torna-se horizontal.

Q: Qual é a diferença entre flex-grow, flex-shrink e flex-basis?

flex-basis define o tamanho inicial de um item antes que o espaço livre seja distribuído. flex-grow define quanto espaço extra um item deve absorver em relação a outros itens (0 significa não crescer). flex-shrink define o quanto um item deve encolher quando não houver espaço suficiente (0 significa não encolher). O atalho flex: 1 1 auto define os três de uma vez.

Q: Quando devo usar Flexbox vs Grid?

Use o Flexbox para layouts unidimensionais onde os itens fluem em uma única direção (uma linha de botões, uma navbar, uma lista de cartões em uma linha). Use o CSS Grid para layouts bidimensionais onde você precisa controlar as linhas e colunas simultaneamente (layouts de página inteira, galerias de imagens, painéis). Os dois são complementares, não concorrentes — muitos designs reais combinam ambos.

Playground CSS Flexbox interativo com pré-visualização em tempo real, controles por item, predefinições de layout do mundo real (Holy Grail, Grade de Cards, Barra de Navegação, Modal) e exportação de CSS com um clique. Aprenda flex-direction, justify-content, align-items, gap e muito mais experimentando em tempo real.

Playground CSS Flexbox

⚡ Layouts de Início Rápido (clique para carregar)

▦ Pré-visualização ao Vivo

→ eixo principal ↓ eixo transversal 0 itens dica: clique em qualquer item para editar

⚙ Contêiner (.flex-container)

flex-direction ?

flex-wrap ?

justify-content ?

align-items ?

align-content ?

gap 8px

8px

✦ Item Selecionado (.flex-item)

Clique em um item na visualização para editar suas propriedades.

📖 Guia Rápido — padrões comuns

▼

Eu quero…	Use isto
Centralizar um item perfeitamente	`justify-content: center; align-items: center`
Colunas de largura igual	`flex: 1` em cada item
Empurrar um item para a direita	`margin-left: auto` naquele item
Quebrar cartões em telas pequenas	`flex-wrap: wrap` + `flex: 1 1 240px`
Inverter ordem no celular	`flex-direction: row-reverse` na media query
Rodapé fixo na base da tela	body: `display: flex; flex-direction: column; min-height: 100vh`
Espaço uniforme entre os itens	`justify-content: space-between`
Não encolher um item	`flex-shrink: 0` nele

CSS Gerado

HTML Gerado

Embed Playground CSS Flexbox Widget

Playground CSS Flexbox

O Playground CSS Flexbox é um ambiente de aprendizado interativo e gerador de código para o moderno módulo CSS Flexible Box Layout. Ajuste as propriedades do contêiner (flex-direction, justify-content, align-items, gap) e as propriedades por item (flex-grow, flex-shrink, flex-basis, align-self, order) e observe seu layout ser atualizado em tempo real. Quando tiver algo que goste, copie o CSS e HTML prontos para colar direto em seu projeto.

O que é CSS Flexbox?

O CSS Flexbox (Flexible Box Layout) é um modelo de layout unidimensional projetado para distribuir espaço ao longo de um único eixo (uma linha ou uma coluna) e alinhar itens dentro de um contêiner. Ele substitui técnicas antigas como floats e truques de inline-block para barras de navegação, linhas de cartões, conteúdo centralizado e qualquer interface onde os elementos precisem se flexionar naturalmente ao seu contêiner. Ao contrário do CSS Grid, que é bidimensional, o Flexbox se destaca em arranjos mais simples onde você controla o alinhamento em apenas uma direção por vez.

Como Usar Este Playground

Escolha uma predefinição (opcional): Escolha Holy Grail, Card Grid, Navbar, Hero, Modal ou Sticky Footer para carregar um ponto de partida do mundo real. Cada predefinição é um layout funcional completo que você pode estudar ou modificar.
Ajuste as propriedades do contêiner: Use os controles segmentados no painel direito para definir flex-direction, flex-wrap, justify-content, align-items, align-content e gap. O estágio visual é atualizado imediatamente.
Edite itens individuais: Clique em qualquer item na pré-visualização para selecioná-lo. Substitua seu order, flex-grow, flex-shrink, flex-basis e align-self independentemente dos demais. Itens com substituições são marcados com um pequeno selo.
Adicione ou remova itens: Use Adicionar Item e Remover Selecionado para alterar a contagem de itens e ver como o layout responde.
Copie o código: A seção Código Gerado na parte inferior sempre reflete seu layout atual. Copie CSS, HTML ou ambos com um clique.

Referência de Propriedades do Contêiner

O contêiner flex é o elemento pai com display: flex. Estas propriedades controlam como todos os seus filhos se comportam juntos.

Propriedade	Valores	Efeito
`flex-direction`	`row` · `row-reverse` · `column` · `column-reverse`	Define a direção do eixo principal. `row` organiza os itens da esquerda para a direita (padrão); `column` os empilha verticalmente.
`flex-wrap`	`nowrap` · `wrap` · `wrap-reverse`	Controla se os itens permanecem em uma linha ou quebram em várias linhas quando o espaço acaba.
`justify-content`	`flex-start` · `center` · `flex-end` · `space-between` · `space-around` · `space-evenly`	Alinha os itens ao longo do eixo principal. Distribui o espaço livre nas laterais ou entre os itens.
`align-items`	`stretch` · `flex-start` · `center` · `flex-end` · `baseline`	Alinha os itens ao longo do eixo transversal (perpendicular ao eixo principal).
`align-content`	`stretch` · `flex-start` · `center` · `flex-end` · `space-between` · `space-around`	Alinha as linhas quebradas ao longo do eixo transversal. Só faz efeito quando os itens quebram em várias linhas.
`gap`	comprimento, ex: `8px`, `1rem`	Define o espaçamento entre os itens flex. Substitui o padrão de espaçamento antigo baseado em `margin`.

Referência de Propriedades do Item

Estas propriedades são aplicadas em itens flex individuais (filhos de um contêiner flex) e substituem os padrões do contêiner apenas para esse item.

Propriedade	Valores	Efeito
`order`	inteiro (padrão `0`)	Reordena os itens visualmente sem alterar o HTML. Números menores renderizam primeiro; valores negativos movem os itens para o início.
`flex-grow`	número (padrão `0`)	Define quanto do espaço livre do contêiner este item deve absorver em relação aos irmãos. `1` em cada item divide o espaço igualmente.
`flex-shrink`	número (padrão `1`)	Define o quanto um item pode encolher quando não houver espaço suficiente. `0` significa nunca encolher — o item mantém seu tamanho declarado.
`flex-basis`	`auto` · comprimento · porcentagem	Define o tamanho inicial de um item antes que o espaço livre seja distribuído. Efetivamente define o tamanho "ideal" do item no eixo principal.
`align-self`	`auto` · o mesmo que `align-items`	Substitui o `align-items` do contêiner para um único item.

Qual é a Diferença Entre justify-content e align-items?

justify-content controla o alinhamento ao longo do eixo principal, enquanto align-items controla o alinhamento ao longo do eixo transversal. O eixo principal é qualquer direção que o flex-direction definir — horizontal para row, vertical para column. Quando você altera o flex-direction de row para column, os dois eixos trocam de lugar, de modo que justify-content torna-se vertical e align-items torna-se horizontal. Essa troca é uma das fontes mais comuns de confusão quando as pessoas aprendem Flexbox; os indicadores de eixo do playground abaixo da visualização ajudam a torná-la visível.

Como Centralizo um Elemento com Flexbox?

Para centralizar um único elemento tanto horizontal quanto verticalmente:

Três linhas:
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */

Este é o substituto moderno para truques de centralização antigos que envolviam margin: auto, transform: translate(-50%, -50%) ou position: absolute. Experimente no playground selecionando a predefinição Modal Center.

Predefinições de Layout do Mundo Real Explicadas

Layout Holy Grail

O clássico layout de página de três colunas: barra lateral esquerda, conteúdo principal, barra lateral direita — com cabeçalho e rodapé. Historicamente muito difícil de construir com floats; o Flexbox torna isso trivial. A coluna do meio usa flex: 1 para absorver todo o espaço horizontal restante enquanto as colunas laterais permanecem em suas larguras declaradas.

Grade de Cartões (Card Grid)

Uma linha de cartões que quebra em novas linhas conforme a janela de visualização diminui. Usa flex-wrap: wrap com cada cartão recebendo flex: 1 1 240px, o que significa que o cartão cresce e encolhe, mas nunca fica mais estreito que 240px.

Barra de Navegação (Navbar)

Uma barra de navegação horizontal com um logotipo à esquerda e links à direita. O truque é justify-content: space-between com o logotipo e o grupo de links como os dois filhos, além de um contêiner flex interno para os próprios links.

Seção Hero

Pilha vertical com conteúdo centralizado tanto horizontal quanto verticalmente — perfeita para áreas hero de landing pages. Usa flex-direction: column, justify-content: center e align-items: center em um contêiner alto.

Centralização de Modal (Modal Center)

Um diálogo modal perfeitamente centralizado dentro de sua sobreposição. A mesma receita de centralização de três linhas mostrada acima, aplicada a um contêiner de sobreposição de tela cheia.

Rodapé Fixo (Sticky Footer)

Um rodapé que fica na parte inferior da tela quando o conteúdo é curto, mas é empurrado para baixo quando o conteúdo é longo. Conseguido ao dar ao body display: flex; flex-direction: column; min-height: 100vh e ao conteúdo principal flex: 1.

Qual é a Diferença Entre flex-grow, flex-shrink e flex-basis?

Essas três propriedades (combinadas no atalho flex) descrevem como um item lida com o espaço:

flex-basis define o tamanho ideal do item antes que qualquer espaço livre seja distribuído. Pense nisso como o "ponto de partida" do item.
flex-grow diz "se sobrar espaço, pegue esta parte dele". Um valor de 0 significa recusar-se a crescer; 1 significa crescer proporcionalmente; 2 significa pegar o dobro da parte de um item com 1.
flex-shrink diz "se não houver espaço suficiente, encolha por esta parte". O padrão é 1 (encolher proporcionalmente); 0 significa recusar-se a encolher.

O atalho flex: 1 expande para flex: 1 1 0% — crescimento igual, encolhimento igual, base zero — o que significa que todos os itens ocupam uma parte igual do contêiner, independentemente do conteúdo. flex: auto expande para flex: 1 1 auto, que respeita o tamanho do conteúdo como base.

Quando Devo Usar Flexbox vs Grid?

Use o Flexbox para layouts unidimensionais onde os itens fluem em uma única direção — uma linha de botões, uma navbar, uma única coluna de cartões. O Flexbox reconhece o conteúdo e é ótimo quando você quer que os itens se dimensionem por conta própria.

Use o CSS Grid para layouts bidimensionais onde você precisa controlar as linhas e colunas simultaneamente — layouts de página inteira, galerias de imagens, painéis. O Grid reconhece o layout e permite colocar itens em trilhas nomeadas.

Os dois são complementares, não concorrentes. Muitos designs reais os combinam: um layout de página em Grid com navbars e linhas de cartões em Flexbox dentro.

Dicas para Dominar o Flexbox

Visualize os eixos. Saiba sempre qual direção é a "principal" (main) e qual é a "transversal" (cross) — os indicadores de eixo do playground tornam isso explícito.
Use gap em vez de margens. Os navegadores modernos suportam totalmente o gap em contêineres flex e isso elimina a necessidade de truques estranhos de margem no último filho.
Aposte no flex: 1. Quando você quer que os itens compartilhem o espaço igualmente, este atalho é quase sempre o que você deseja.
min-width: 0 em itens flex. Os itens têm uma largura mínima implícita baseada em seu conteúdo. Se strings longas inquebráveis (como URLs) fizerem seu layout transbordar, defina min-width: 0 no item para substituir isso.
Evite larguras apenas em porcentagem. Misturar larguras em porcentagem com flex-grow pode produzir resultados surpreendentes. Prefira flex-basis com um padrão sensato.

Suporte do Navegador e Compatibilidade

O CSS Flexbox é compatível com todos os navegadores modernos, incluindo Chrome, Firefox, Safari, Edge e todos os principais navegadores móveis. A propriedade gap em contêineres flex alcançou suporte universal em 2021. Navegadores legados mais antigos (IE10/11) exigem prefixos de fornecedor e possuem vários bugs documentados; para esses públicos, considere flexbugs.

Perguntas Frequentes

Por que meu item flex está transbordando do contêiner?

Os itens flex têm um min-width: auto implícito baseado em seu conteúdo. Palavras longas, blocos de código ou texto pré-formatado podem forçar um item a ser mais largo que o contêiner. Corrija isso definindo min-width: 0 no item (ou min-height: 0 para layouts de coluna).

Qual é a diferença entre space-between, space-around e space-evenly?

space-between não coloca espaço nas extremidades e coloca espaço igual entre os itens. space-around coloca metade de um espaço em cada extremidade e espaços inteiros entre os itens. space-evenly coloca espaço igual nas extremidades e entre os itens. Alterne entre eles no playground para sentir a diferença.

Posso animar propriedades flex?

Sim. flex-grow, flex-shrink, flex-basis, order e gap podem ter transições. A animação de flex-direction, justify-content e align-items não é suportada porque são propriedades enumeradas discretas.

O playground funciona offline?

Todo o cálculo do Flexbox acontece no seu navegador usando CSS nativo. Assim que a página for carregada, você poderá usar o playground sem uma conexão com a internet — não há chamadas de API ou computação no lado do servidor.

O código gerado está pronto para produção?

Sim. O CSS exportado usa propriedades padrão suportadas em todos os navegadores modernos. O HTML usa nomes de classes semânticos (flex-container, flex-item) que você pode renomear para se adequar às convenções do seu projeto.

Recursos Adicionais

Cite este conteúdo, página ou ferramenta como:

"Playground CSS Flexbox" em https://MiniWebtool.com/br/playground-css-flexbox/ de MiniWebtool, https://MiniWebtool.com/

pela equipe miniwebtool. Atualizado em: 25 de abr de 2026

Playground CSS Flexbox

Playground CSS Flexbox

O que é CSS Flexbox?

Como Usar Este Playground

Referência de Propriedades do Contêiner

Referência de Propriedades do Item

Qual é a Diferença Entre justify-content e align-items?

Como Centralizo um Elemento com Flexbox?

Predefinições de Layout do Mundo Real Explicadas

Layout Holy Grail

Grade de Cartões (Card Grid)

Barra de Navegação (Navbar)

Seção Hero

Centralização de Modal (Modal Center)

Rodapé Fixo (Sticky Footer)

Qual é a Diferença Entre flex-grow, flex-shrink e flex-basis?

Quando Devo Usar Flexbox vs Grid?

Dicas para Dominar o Flexbox

Suporte do Navegador e Compatibilidade

Perguntas Frequentes

Por que meu item flex está transbordando do contêiner?

Qual é a diferença entre space-between, space-around e space-evenly?

Posso animar propriedades flex?

O playground funciona offline?

O código gerado está pronto para produção?

Recursos Adicionais

Ferramentas de webmaster:

Ferramentas em destaque: