AZ Tools

Playground de CSS Flexbox

Desenvolvimento

Ajuste cada propriedade flex clicando em vez de digitar. A pré-visualização atualiza imediatamente para deixar claro o significado de cada valor, e a caixa de saída entrega tanto a regra CSS pura quanto as classes utility do Tailwind equivalentes. Ótimo para aprender o modelo, depurar layouts ou colar a combinação certa em um projeto.

—
flex-direction
flex-wrap
justify-content
align-items
Pré-visualização
1
2
3
4
5
CSS
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
Tailwind
flex gap-[8px]

Como usar

  1. Clique nas chips de cada propriedade para definir o valor.
  2. Ajuste o gap e a quantidade de itens para uma pré-visualização mais realista.
  3. Copie a regra CSS ou a classe Tailwind para seu projeto.

Perguntas frequentes

Diferença entre justify-content e align-items?
justify-content alinha no eixo principal (a direção em que o container flui); align-items no eixo cruzado. Mude direction para column e os papéis trocam visualmente.
Por que align-items stretch preenche o container?
Stretch é o padrão. Diz aos itens sem tamanho explícito no eixo cruzado para preencher o espaço disponível. Outro valor encolhe os itens para o conteúdo.
Quando flex-wrap importa?
Quando os itens não cabem em uma linha. Com wrap, vão para a próxima linha; com nowrap (padrão) encolhem para caber ou transbordam.
Por que a classe Tailwind é valor arbitrário?
A maioria das propriedades flex tem classe dedicada (flex, justify-center, items-center, gap-2). Gaps com valores custom (8px, 12px) usam valores arbitrários como gap-[8px].

Ferramentas relacionadas

Decodificador JWT

Decodifique um JSON Web Token para inspecionar cabeçalho, claims e expiração.

Desenvolvimento00

Gerador de UUID

Gere UUIDs v4 aleatórios em lote, com cópia.

Desenvolvimento00

Gerador de Hash (SHA)

Gere hashes SHA-1, SHA-256, SHA-384 e SHA-512 a partir de texto.

Desenvolvimento00

Codificador / Decodificador de URL

Codifique texto para URLs em porcentagem, ou decodifique URLs em texto.

Desenvolvimento00

Codificador / Decodificador Base64

Codifique texto em Base64 ou decodifique Base64 de volta em texto.

Desenvolvimento00

Formatador e Validador de JSON

Formate, embeleze, minifique e valide JSON no seu navegador.

Desenvolvimento00