Patrones reales: centrado, navbar y reparto

Patrón 1: el centrado perfecto

El santo grial histórico de CSS —centrar algo horizontal y verticalmente— era para tirarse de los pelos. Con flexbox es trivial: centras en ambos ejes a la vez con dos líneas.

.centro {
  display: flex;
  justify-content: center;  /* eje principal */
  align-items: center;      /* eje cruzado */
  min-height: 100vh;        /* el contenedor necesita alto para centrar en vertical */
}

El detalle clave: para centrar en vertical, el contenedor debe tener altura. Sin min-height (o un alto fijo) no hay espacio sobrante en el eje cruzado y parecerá que align-items "no hace nada".

Patrón 2: la barra de navegación

El layout más repetido de la web: logo a un lado, enlaces al otro. Se resuelve con justify-content: space-between, que empuja el primer y el último hijo a los extremos:

.nav {
  display: flex;
  justify-content: space-between; /* logo a la izquierda, menú a la derecha */
  align-items: center;            /* todo a la misma altura */
}
.nav ul {
  display: flex;   /* los enlaces, a su vez, en fila */
  gap: 24px;
  list-style: none;
}

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

Una variante muy útil: si quieres el logo a un lado y todo lo demás al otro sin contar con space-between, da margin-left: auto al primer elemento del grupo derecho. Los márgenes automáticos absorben todo el espacio sobrante del eje principal, un truco potentísimo de flexbox.

Patrón 3: repartir el espacio (holy grail)

Una cabecera fija, un contenido que ocupa "lo que quede" y un pie fijo, en columna:

.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.layout main {
  flex: 1;   /* el contenido absorbe todo el alto sobrante */
}

La cabecera y el pie conservan su tamaño natural; flex: 1 en el main hace que el pie quede siempre abajo, aunque haya poco contenido. El mismo patrón en horizontal te da una sidebar fija con contenido elástico:

.app { display: flex; }
.app .sidebar { flex: 0 0 240px; } /* ancho fijo */
.app .contenido { flex: 1; }       /* el resto */

Con estos tres patrones —centrar, space-between y flex: 1— cubres el 90 % de lo que necesitarás en un proyecto real. Flexbox brilla repartiendo en una dirección: una fila, una columna. Cuando necesites mandar en filas y columnas a la vez (una rejilla de verdad), el relevo lo toma grid, y ahí vamos después.