Layout com Flexbox — CSS: aplicar estilo

Flexbox

Cansado de brigar para centralizar as coisas? O Flexbox é a forma moderna de alinhar e distribuir elementos sem sofrimento. Ele é ativado colocando display: flex no contêiner (não nos filhos); a partir daí, seus filhos são posicionados em linha.

.conteiner {
  display: flex;
  justify-content: center;  /* alinhamento horizontal */
  align-items: center;      /* alinhamento vertical */
  gap: 12px;                /* espaçamento entre os filhos */
}

justify-content: distribui no eixo principal (center, space-between, flex-start...).
align-items: alinha no eixo cruzado (center, stretch...).
flex-direction: column troca a linha por uma coluna.

Com essas poucas propriedades você resolve a maioria dos layouts. Sério: dominar o flexbox é o dia em que você para de brigar com o CSS.