Sobre esta ferramenta
O Gerador de CSS Flexbox cria declarações Flexbox modernas e normalizadas para um contentor. A pré-visualização contém elementos numerados e aplica imediatamente cada alteração, facilitando a comparação dos alinhamentos.
Como utilizar
- Defina flex-direction para escolher a direção do eixo principal.
- Escolha justify-content e align-items.
- Defina flex-wrap e o espaçamento gap.
- Confira as posições dos elementos e copie o CSS de .container.
Exemplos de utilização
- row com center pode centrar os elementos horizontalmente.
- column muda o eixo principal para a direção vertical.
- wrap permite novas linhas quando falta espaço; nowrap mantém uma única linha.
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}Funcionamento e explicação do CSS
justify-content controla a distribuição no eixo principal; align-items controla o alinhamento no eixo transversal. Em row, o eixo principal é habitualmente horizontal; column torna-o vertical. flex-wrap decide se os elementos passam para outra linha quando falta espaço e gap define o espaçamento entre elementos ou linhas.
Utilizações comuns
- Criar navegação, grupos de botões e disposições de cartões.
- Compreender os eixos principal e transversal.
- Comparar space-between, space-around e space-evenly.
Privacidade
O processamento das entradas, os cálculos, a geração de CSS e as pré-visualizações decorrem no seu navegador. O conteúdo nunca é enviado para um servidor. Não são usados backend, base de dados, API online ou CDN de terceiros, nem as suas entradas são guardadas automaticamente.
FAQ
Qual é a diferença entre justify-content e align-items?
O primeiro controla a distribuição no eixo principal e o segundo o alinhamento no eixo transversal. Não correspondem sempre à horizontal e à vertical.
O que acontece ao eixo principal quando altero flex-direction?
row usa a direção das linhas e column a das colunas. As variantes reverse invertem o sentido do respetivo eixo principal.
Quando devo usar flex-wrap?
Use wrap quando os elementos não devem ficar comprimidos numa só linha e o contentor pode apresentar várias linhas.
Posso usar gap em Flexbox?
Sim. Define o espaçamento entre elementos e linhas. O código gerado usa a propriedade padrão gap.