design
Gratuito
Sem cadastro
Gerador de QR Code
Configure visualmente as propriedades do Flexbox e obtenha o CSS gerado instantaneamente.
Carregando ferramenta…
Sobre esta ferramenta
Ajuste todas as propriedades de contêiner Flexbox — flex-direction, flex-wrap, justify-content, align-items, align-content e gap — e veja uma visualização ao vivo de 5 caixas coloridas responder em tempo real. Clique em qualquer caixa individual para ajustar seus próprios flex-grow, flex-shrink, flex-basis, align-self e order, depois copie o CSS finalizado com um clique.
Como usar
- 1 Etapa 1: Use o painel Container à esquerda para definir propriedades de direção, quebra e alinhamento.
- 2 Etapa 2: Observe as caixas coloridas na visualização atualizarem ao vivo conforme você altera cada propriedade.
- 3 Etapa 3: Clique em qualquer caixa individual para selecioná-la e ajustar suas próprias propriedades flex no painel Item.
- 4 Etapa 4: Copie o CSS gerado para o contêiner, o item selecionado ou todos os itens de uma vez.