Gerador Flexbox CSS
display
display
Direcao
flex-direction
Quebra de linha
flex-wrap
Eixo principal
justify-content
Eixo cruzado
align-items
Linhas multiplas
align-content
Espacamento
gap
Selecionar filho
Crescimento
flex-grow
Encolhimento
flex-shrink
Tamanho base
flex-basis
Alinhamento proprio
align-self
Ordem
order
Preview ao vivo — clique em um filho para seleciona-lo
CSS Gerado
Padroes Flexbox comuns — clique para aplicar
Sobre o Gerador Flexbox CSS
O modelo Flexbox (Flexible Box Layout) e um modulo CSS projetado para distribuir espacos e alinhar elementos num container de forma eficiente, mesmo quando o tamanho dos elementos e desconhecido ou dinamico.
Propriedades do container: definem o comportamento geral do layout — direcao, quebra de linha, alinhamento nos dois eixos e espacamento entre filhos.
Propriedades dos filhos: permitem sobrescrever o comportamento padrao de cada item individualmente — crescimento, encolhimento, tamanho base, auto-alinhamento e ordem visual.