Gerador CSS Flexbox

Crie um exemplo de Flexbox

1. Escolha o tamanho do exemplo, a direção da escrita, a quebra de linha e o alinhamento.
2. Selecione cada item para editar seu texto, dimensionamento flexível, comportamento mínimo e ordem visual.
3. Inspecione os eixos e visualize, depois copie o fragmento CSS e HTML atual ou baixe o exemplo completo.

Entenda o exemplo

O eixo principal segue a linha ou coluna no modo de escrita selecionado. As configurações reversas alteram seu início e fim; RTL não é simplesmente uma virada horizontal universal.

A base flexível é um tamanho principal inicial, não uma largura final garantida. Crescimento, redução ponderada, quebra de linha e tamanhos mínimos automáticos influenciam o resultado do navegador.

Os controles de ordem de origem alteram o HTML. A ordem CSS e as configurações reversas alteram a disposição visual sem alterar a leitura lógica ou a ordem do teclado.

O exemplo tem dimensões border-box fixas, espaçamento interno, bordas e rolagem. O espaço interno disponível é menor; fontes do sistema ou barras de rolagem podem alterar o layout.

Experimentos úteis

Dê valores de crescimento positivos a três itens e compare como o espaço extra é compartilhado. Altere seu texto e mínimos automáticos em vez de assumir que todos os itens flexíveis se tornam iguais.

Ative a quebra de linha, reduza a largura do exemplo e altere align-content. Um contêiner nowrap ignora essa propriedade; com quebra ativada, ela pode atuar mesmo com uma única linha.

Compare LTR e RTL e tente a escrita vertical. Leia os rótulos físicos de início e fim em vez de assumir que linha sempre significa da esquerda para a direita.

Saiba o que é gerado

Este é um exemplo de componente de tamanho fixo limitado, não um construtor de páginas ou uma garantia de design responsivo. Seu conteúdo real e estilos circundantes exigem sua própria revisão.

Os tamanhos mínimos automáticos podem impedir a redução esperada. A opção “Permitir tamanho menor que o conteúdo” define explicitamente os dois mínimos como zero; a ferramenta não faz isso de modo oculto.

Ajustar altera apenas a escala de visualização. Use 100% e as áreas de rolagem contidas para inspecionar detalhes; o suporte à análise ou uma visualização carregada não certifica a renderização de todos os navegadores.

Copiar HTML fornece um fragmento que também precisa do CSS. O download completo contém o mesmo documento da visualização, incluindo uma pequena redefinição de estilos do documento e uma política restritiva de recursos.

Autoria local

A ferramenta não envia nem salva seu texto ou código gerado. Copiar e baixar o exemplo completo são ações solicitadas por você; os demais serviços do site seguem suas próprias regras de privacidade.