O que é CSS Flexbox?
CSS Flexbox (Flexible Box Layout) é um modelo de layout unidimensional para distribuir espaço e alinhar itens em uma linha ou coluna. O contêiner flex é definido com display: flex, e seus filhos diretos se tornam itens flex. Propriedades chave do contêiner: flex-direction (linha ou coluna), flex-wrap (linha única vs. multilinha), justify-content (alinhamento do eixo principal), align-items (alinhamento do eixo transversal por linha) e align-content (alinhamento do eixo transversal de múltiplas linhas). Propriedades chave dos itens: flex-grow (quanto um item cresce), flex-shrink (quanto ele encolhe), flex-basis (tamanho inicial) e align-self (substitui o align-items do contêiner para um item específico). Flexbox é ideal para barras de navegação, fileiras de cartões, layouts centralizados e qualquer disposição unidimensional.
Como usar o Gerador CSS Flexbox
-
Ajuste as propriedades do contêiner (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) usando os menus suspensos e o campo de entrada.
-
Clique em qualquer item na visualização para selecioná-lo (fica laranja).
-
Defina flex-grow, flex-shrink, flex-basis e align-self do item selecionado no painel de itens.
-
Clique em '+ Adicionar item' para adicionar mais itens; clique em 'Remover' para excluir o item selecionado.
-
Alterne entre as abas CSS e HTML para ver o código gerado e clique em Copiar.
-
Clique em 'Redefinir tudo' para começar do zero com o layout padrão de 3 itens.