a11y.skipToMainContent
1

Gerador Flexbox CSS

Experimente com o CSS flexbox visualmente — ajuste cada propriedade do recipiente e copie o CSS gerado.

Items: 5

1 to 12 items.

Preview

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use Flexbox Generator

  1. Escolha uma direção flex e flex-wrap para o recipiente.
  2. Ajustar o conteúdo justificado, itens alinhados, conteúdo alinhado e o espaço.
  3. Use Adicionar item e remover item para definir quantas caixas aparecem na visualização.
  4. Copie o recipiente gerado CSS e cole-o em seu projeto.

O que é {nome}?

Esta ferramenta é um playground prático para o layout de caixa flexível CSS. Transformar um contêiner em um contexto flexível com display: flex desbloqueia um poderoso alinhamento unidimensional, e este gerador permite visualizar cada propriedade do contêiner ao invés de adivinhar.

Mude a direção do eixo principal, controle de envoltório, distribua itens com justify-content, alinhe-os no eixo transversal com align-items, e adicione espaçamento com gap. Adicione ou remova caixas numeradas para ver como os itens reais respondem, em seguida, copie o CSS acabado diretamente em sua folha de estilo. Tudo é executado localmente no seu navegador.

Advertisement

FAQ

Qual é a diferença entre justificar-conteúdo e alinhar-itens?
justificar-conteúdo distribui itens ao longo do eixo principal (a direção definida pela direção flex), enquanto alinhamento-itens os posiciona no eixo transversal perpendicular. Comutando a direção flex entre linha e coluna efetivamente troca o eixo que cada um controla.
Por que o alinhamento-conteúdo não tem efeito visível às vezes?
o conteúdo de alinhamento só se aplica quando os itens envolvem várias linhas. Defina flex-wrap para enrolar e adicione itens suficientes que eles quebram em uma segunda linha antes de mudar o conteúdo de alinhamento para vê-lo funcionar.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Flexbox Generator on Wikipedia·Developer Tools on Wikipedia·Flexbox Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement