Padrões reais: centralização, navbar e repartição

Padrão 1: a centralização perfeita

O santo graal histórico do CSS —centralizar algo horizontal e verticalmente— era de arrancar os cabelos. Com flexbox é trivial: você centraliza nos dois eixos ao mesmo tempo com duas linhas.

.centro {
  display: flex;
  justify-content: center;  /* eixo principal */
  align-items: center;      /* eixo cruzado */
  min-height: 100vh;        /* o contêiner precisa de altura para centralizar na vertical */
}

O detalhe-chave: para centralizar na vertical, o contêiner deve ter altura. Sem min-height (ou uma altura fixa) não há espaço sobrante no eixo cruzado e vai parecer que align-items "não faz nada".

Padrão 2: a barra de navegação

O layout mais repetido da web: logo de um lado, links do outro. É resolvido com justify-content: space-between, que empurra o primeiro e o último filho para os extremos:

.nav {
  display: flex;
  justify-content: space-between; /* logo à esquerda, menu à direita */
  align-items: center;            /* tudo na mesma altura */
}
.nav ul {
  display: flex;   /* os links, por sua vez, em linha */
  gap: 24px;
  list-style: none;
}

<nav class="nav">
  <span class="logo">DevPath</span>
  <ul>
    <li><a href="#">Cursos</a></li>
    <li><a href="#">Preços</a></li>
    <li><a href="#">Entrar</a></li>
  </ul>
</nav>

Uma variante muito útil: se você quiser o logo de um lado e todo o resto do outro sem contar com space-between, dê margin-left: auto ao primeiro elemento do grupo da direita. As margens automáticas absorvem todo o espaço sobrante do eixo principal, um truque poderosíssimo do flexbox.

Padrão 3: repartir o espaço (holy grail)

Um cabeçalho fixo, um conteúdo que ocupa "o que sobrar" e um rodapé fixo, em coluna:

.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.layout main {
  flex: 1;   /* o conteúdo absorve toda a altura sobrante */
}

O cabeçalho e o rodapé conservam seu tamanho natural; flex: 1 no main faz com que o rodapé fique sempre embaixo, mesmo com pouco conteúdo. O mesmo padrão na horizontal te dá uma sidebar fixa com conteúdo elástico:

.app { display: flex; }
.app .sidebar { flex: 0 0 240px; } /* largura fixa */
.app .contenido { flex: 1; }       /* o resto */

Com esses três padrões —centralizar, space-between e flex: 1— você cobre 90 % do que vai precisar em um projeto real. O flexbox brilha distribuindo em uma direção: uma linha, uma coluna. Quando você precisar comandar linhas e colunas ao mesmo tempo (uma grade de verdade), quem assume é o grid, e é para lá que vamos a seguir.