Como gerar um layout CSS Flexbox

Para que serve

O CSS Flexbox Generator serve para obter um snippet CSS de uma configuração Flexbox sem escrever manualmente as declarações principais. É útil quando já sabe como quer distribuir, alinhar e espaçar os elementos e pretende transformar essas escolhas num ponto de partida para o seu código. A configuração abrange direção, justificação, alinhamento, quebra de linha e espaçamento.

Como gerar o snippet CSS

1. Defina o resultado que pretende para o contentor: uma disposição em linha ou em coluna, a forma como os itens devem ser distribuídos, o alinhamento no eixo transversal, o comportamento quando falta espaço e a distância entre itens.

2. Introduza os valores correspondentes nos controlos disponíveis. Se não indicar uma direção, é usada row; a justificação e o alinhamento assumem center, a quebra de linha assume nowrap e o espaçamento assume 10.

3. Para um espaçamento personalizado, introduza o valor numérico pretendido. Por exemplo, 16 é colocado no CSS como 16px.

4. Solicite a geração e leia o snippet devolvido. Confirme se aparecem uma declaração de flexibilidade e declarações para direção, justificação, alinhamento, quebra de linha e espaçamento. Depois, copie o código para o seu projeto e ajuste-o ao HTML e aos restantes estilos.

Evite acrescentar parâmetros fora das opções de configuração descritas: argumentos adicionais não alteram o CSS gerado nem os valores de configuração apresentados.

Como interpretar o resultado

O resultado é um snippet CSS construído a partir dos valores fornecidos. Assim, uma direção como column, uma justificação como space-between, um alinhamento como flex-start e uma quebra como wrap devem aparecer nas declarações correspondentes, enquanto um espaçamento numérico deve surgir com o sufixo px. O retorno bem-sucedido indica que o CSS foi gerado; não significa, por si só, que o layout esteja integrado no seu HTML ou que corresponda ao efeito visual pretendido no seu projeto.

Leia cada declaração em função do contentor ao qual a vai aplicar. Se o resultado não corresponder à intenção, reveja primeiro os cinco valores configuráveis e depois o contexto onde o snippet será usado. Valores fornecidos são inseridos no CSS gerado, por isso convém escolher a sintaxe e a combinação adequadas ao objetivo pretendido.

Exemplo prático

Uma pessoa está a preparar um cabeçalho que deve manter os itens alinhados e permitir a passagem para outra linha quando o espaço disponível diminuir.

Para um contentor horizontal com itens distribuídos entre si, indique row na direção, space-between na justificação, center no alinhamento, wrap na quebra de linha e 16 no espaçamento; depois solicite a geração do snippet.

O resultado contém uma declaração de flexibilidade, declarações com row, space-between, center e wrap, e uma declaração de espaçamento com 16px.

Limitações

• O comportamento descrito limita-se à geração do snippet CSS e das respetivas declarações; a integração com o HTML e com os estilos do projeto não faz parte desse resultado.

Erros comuns

• Introduzir 16px quando o campo espera o valor numérico pode levar a um resultado diferente do pretendido. Use 16 para que o CSS gerado apresente 16px.

Perguntas frequentes

Quais são os valores predefinidos?

Quando o valor não é indicado, a direção usada é row, a justificação e o alinhamento são center, a quebra de linha é nowrap e o espaçamento é 10, apresentado como 10px no CSS gerado.

Como definir o espaçamento entre os itens?

Introduza o valor numérico pretendido para o espaçamento. Um valor como 24 é apresentado no CSS com o sufixo px, resultando em 24px.

O resultado já aplica o layout à minha página?

O resultado é um snippet CSS com uma declaração de flexibilidade e declarações para direção, justificação, alinhamento, quebra de linha e espaçamento. A aplicação desse código no seu projeto fica a seu cargo.