Caixa 1
Caixa 2
Caixa 3

Playground: ajuste o Flexbox ao vivo

Experimente diferentes valores de alinhamento e veja o resultado imediatamente.

Altere as opções e observe as caixas na seção de demonstração.

CSS essencial usado

.flex-container {
  display: flex;
  justify-content: center;  /* eixo principal (horizontal) */
  align-items: center;      /* eixo cruzado (vertical) */
  min-height: 70vh;         /* ajuda a visualizar o alinhamento vertical */
  gap: 1.25rem;
}

Dica: use o botão “Copiar CSS” no playground para copiar os valores atuais.