6XC

Playground de CSS Flexbox

Ajuste flex-direction, justify-content, align-items, wrap e gap em caixas ao vivo, depois copie o CSS do container.

849 visualizações

1
2
3
4
5

Flexbox em poucas palavras

Ao definir display: flex, um container vira um motor de layout unidimensional. justify-content distribui os itens ao longo do eixo principal, align-items os alinha no eixo transversal, flex-direction escolhe o eixo, e gap cria espaçamento entre os itens sem usar margens. Brinque com os controles e veja as caixas numeradas se reorganizarem ao vivo.

Perguntas Frequentes

Como centralizo algo perfeitamente?

As famosas três linhas: display: flex; justify-content: center; align-items: center; — centralização horizontal e vertical de uma vez só.

Flexbox ou Grid?

Flexbox se destaca em linhas ou colunas unidimensionais que se ajustam ao conteúdo (barras de ferramentas, navegação, fileiras de cards). Grid foi feito para layouts bidimensionais com trilhas explícitas. Os dois se combinam muito bem.

Ferramentas Semelhantes

Gerador de Gradiente CSS Crie gradientes CSS lineares, radiais e cônicos com pré-visualização ao vivo e copie o código. Gerar Gerador de Sombra CSS (Box Shadow) Desenhe uma box-shadow visualmente — deslocamentos, desfoque, expansão, cor, opacidade e inset — com pré-visualização em tempo real. Gerar Gerador de Border Radius CSS Arredonde cada canto individualmente ou todos de uma vez, em px ou %, com pré-visualização ao vivo e CSS copiável. Gerar Gerador de Sombra de Texto CSS Crie um text-shadow com deslocamentos, desfoque, cor e opacidade — pré-visualização ao vivo em texto de exemplo. Gerar