Sobre esta ferramenta
Flexbox é a espinha dorsal do layout CSS moderno, mas suas propriedades são difíceis de lembrar até você vê-las em ação. Este gerador transforma flex-direction, justify-content, align-items, flex-wrap e gap em controles simples, com uma fileira de itens reais que se reorganizam no instante em que você muda algo.
É a forma mais rápida de entender como as propriedades interagem — e quando o layout ficar bom, copie o CSS do contêiner. Tudo roda no seu navegador.
Perguntas frequentes
Isso gera CSS para o contêiner ou para os itens individuais?
Ele gera as propriedades flex do contêiner pai (flex-direction, justify-content, align-items, flex-wrap, gap) — propriedades por item, como flex-grow ou order, não são cobertas.
Qual a diferença entre justify-content e align-items?
justify-content controla o espaçamento ao longo do eixo principal (horizontal em um layout de linha), enquanto align-items controla o alinhamento no eixo transversal (vertical em um layout de linha).
Preciso de prefixos de fornecedor para flexbox em projetos modernos?
Não, todos os navegadores atuais suportam as propriedades flexbox sem prefixo; a antiga sintaxe -webkit-box / -ms-flexbox só é necessária em navegadores com mais de uma década.
Meus dados de layout são enviados para algum lugar?
Não. A pré-visualização e o CSS gerado rodam inteiramente no seu navegador — nada é enviado a um servidor.
Por que os valores de gap não funcionam em alguns navegadores antigos?
A propriedade gap dentro de contêineres flex é suportada por todos os navegadores lançados após 2021; para navegadores mais antigos, use margens nos itens em vez disso.