Gerador de flexbox CSS
Ajuste as propriedades flex e veja o layout ao vivo, depois copie o CSS.
Gerador de flexbox CSS
Construa um layout flexbox CSS de forma visual e copie o código. Ajuste flex-direction, justify-content, align-items e gap, e veja três caixas de exemplo reorganizarem-se ao vivo na pré-visualização.
Flexbox em resumo
Defina display: flex num contentor. flex-direction define o eixo principal (linha ou coluna); justify-content alinha os itens ao longo dele; align-items alinha-os no eixo cruzado; gap adiciona espaço entre itens. É a ferramenta de referência para layouts unidimensionais como barras de navegação e filas de cartões.
Perguntas frequentes
Diferença entre justify-content e align-items? justify-content atua no eixo principal; align-items no eixo cruzado.
Flexbox ou grid? Flexbox para uma dimensão (uma linha ou coluna); grid para duas dimensões.