Gerador de Flexbox CSS
Escolha visualmente as propriedades de um contêiner Flexbox (direção, alinhamento, espaçamento, quebra de linha) e obtenha o código CSS correspondente, com pré-visualização ao vivo.
Como funciona
Flexbox é o sistema de layout CSS mais usado para alinhar elementos em um eixo (linha ou coluna). Esta ferramenta evita que você tenha que memorizar os valores exatos de justify-content ou align-items: ajuste os menus suspensos e copie diretamente o bloco CSS gerado para a sua folha de estilo.
Qual a diferença entre justify-content e align-items?
justify-content alinha os elementos ao longo do eixo principal (definido por flex-direction), enquanto align-items os alinha ao longo do eixo perpendicular (o eixo secundário).
Quando devo ativar o flex-wrap?
Ative-o quando quiser que os elementos passem para a linha seguinte quando não couberem mais na largura do contêiner, em vez de serem comprimidos ou transbordarem.
Processamento 100% local: o código é gerado inteiramente no seu navegador via WebAssembly.