Gerador de CSS Flexbox
Altere as propriedades do contêiner e de cada item e veja na hora como eles se distribuem. É a forma mais rápida de entender o flexbox sem escrever código às cegas: quando o resultado agradar, copie só o CSS que você modificou.
Processado 100% no seu navegador
Clique em um item da pré-visualização para editá-lo.
Ctrl + Enter executarCtrl + C copiar resultado
Como usar
- 1Ajuste direção, quebra de linha, distribuição e alinhamento do contêiner.
- 2Escolha quantos itens aparecem na pré-visualização.
- 3Clique em um item para mudar grow, shrink, basis, align-self e ordem.
- 4Copie o CSS gerado.
Casos de uso
- Centralizar um elemento na horizontal e na vertical.
- Montar uma barra de navegação com links bem distribuídos.
- Criar uma fileira de cartões que quebra em várias linhas em telas pequenas.
- Aprender a diferença entre justify-content e align-items.
Perguntas frequentes
Qual a diferença entre justify-content e align-items?
justify-content distribui os itens ao longo do eixo principal (a linha, por padrão) e align-items os alinha no eixo transversal. Se você mudar a direção para coluna, os eixos se invertem.
Como centralizo um elemento com flexbox?
No contêiner use justify-content: center e align-items: center. O contêiner precisa ter altura para o centro vertical aparecer.
O que significa flex: 1 1 auto?
São grow, shrink e basis: quanto o item pode crescer, quanto pode encolher e seu tamanho inicial antes de repartir o espaço que sobra.
Quando usar flexbox e quando grid?
O flexbox é ideal para organizar itens em uma só dimensão, linha ou coluna. Para grades de linhas e colunas ao mesmo tempo, use CSS Grid.