Alinear en una línea: justify-content y align-items

Esta lección instala el concepto más importante de Flexbox y el que más se confunde: eje principal y eje cruzado.

---

Eje principal y eje cruzado — el concepto-ancla

Cuando activás display: flex, el contenedor tiene dos ejes:

• Eje principal: la dirección en que fluyen los ítems (definida por flex-direction).
• Eje cruzado: perpendicular al principal.

flex-direction	Eje principal	Eje cruzado
row (por defecto)	Horizontal →	Vertical ↓
column	Vertical ↓	Horizontal →

Cuando cambiás flex-direction, los ejes rotan. Y las propiedades de alineación actúan sobre los ejes — no sobre direcciones absolutas.

---

justify-content — eje PRINCIPAL

justify-content controla cómo se distribuyen los ítems a lo largo del eje principal.

.nav {
  display: flex;
  justify-content: flex-start;    /* al inicio (por defecto) */
  justify-content: flex-end;      /* al final */
  justify-content: center;        /* centrados */
  justify-content: space-between; /* espacio ENTRE ítems; primero y último en los bordes */
  justify-content: space-around;  /* espacio alrededor de cada ítem */
  justify-content: space-evenly;  /* espacio igual entre y en los bordes */
}

Solo actúa cuando hay espacio libre en el eje principal. Si los ítems ya llenaron el contenedor, justify-content no tiene efecto visible.

Ojo al cambiar de dirección: con flex-direction: column, justify-content controla la posición vertical de los ítems — porque ahora el eje principal es vertical. El eje cambió; la propiedad siempre trabaja sobre el eje principal.

---

align-items — eje CRUZADO

align-items controla cómo se posicionan los ítems a lo largo del eje cruzado.

.hero {
  display: flex;
  justify-content: center; /* centro en eje principal (horizontal) */
  align-items: center;     /* centro en eje cruzado (vertical) */
  height: 400px;           /* el contenedor debe tener altura para ver el centrado */
}

Valores:

• stretch (por defecto): los ítems se estiran para llenar la altura.
• flex-start: ítems al inicio del eje cruzado.
• flex-end: ítems al final.
• center: ítems centrados.
• baseline: alineados por la línea base del texto.

El dúo justify-content: center + align-items: center es el truco estándar para centrar contenido vertical y horizontalmente. Requiere que el contenedor tenga altura definida — sin altura, el eje cruzado no tiene espacio libre y el centrado no se ve.

---

Tu turno: aplicá las propiedades a .hero y .barra. Observá en el preview cómo cambia el layout y comprobá con el botón “Comprobar”.