EspañolGerador de flexbox CSS
Mude as opções e veja os itens se moverem na hora. O código embaixo mostra só o que você mudou do padrão.
Flexbox sem decorar propriedade
Disponível em: 
Gerador de flexbox CSS: para que serve
Flexbox é o jeito mais usado de alinhar itens numa linha ou numa coluna em CSS, mas os nomes das propriedades confundem quem está começando.
Aqui você muda cada opção num seletor e vê os itens se moverem na hora: direção, quebra de linha, distribuição no eixo principal, alinhamento no eixo cruzado, align-content e espaço entre itens. O código mostra só o que mudou do padrão e avisa quando uma propriedade não tem efeito com as outras escolhas.
Como usar
- Escolha as opções de direção, alinhamento e quebra.
- Ajuste o gap, a quantidade de itens e o item que cresce.
- Copie o CSS do container.
Quando usar
- Centralizar um elemento na tela.
- Montar um menu ou uma linha de botões.
- Aprender flexbox na prática.
Perguntas frequentes
Qual a diferença entre justify-content e align-items?
justify-content distribui os itens no eixo principal (na horizontal, se a direção for row) e align-items alinha no eixo cruzado (na vertical, no mesmo caso). Se mudar a direção para column, os dois trocam de eixo.
Quando usar flexbox e quando usar grid?
Flexbox é para uma dimensão: uma linha de botões, um menu, itens que se ajeitam conforme o espaço. Grid é para duas dimensões ao mesmo tempo, como uma galeria ou o layout da página. Os dois podem ser usados juntos.
Para que serve o gap?
Coloca espaço entre os itens sem margem nas bordas, o que antes exigia margem e seletores como :last-child. Funciona com flexbox em todos os navegadores atuais.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.