Activar Flexbox: display, dirección y gap

En CAT-24 usaste position para casos específicos: badges, tooltips, headers pegados. Ahora llega la herramienta para disponer múltiples elementos en fila o columna de forma mantenible: Flexbox.

`display: flex` — activar el contenedor

display: flex transforma un elemento en un contenedor flex. Sus hijos directos se convierten automáticamente en ítems flex sin que vos toques nada en ellos.

/* .nav es el contenedor flex */
.nav {
  display: flex;
}
/* Todos los <a> hijos directos de .nav son ahora ítems flex */

Al activar display: flex:

Los hijos se disponen en fila (de izquierda a derecha por defecto)
Dejan de ocupar el ancho completo — coexisten en la misma línea
Se estiran para llenar la altura del contenedor (align-items: stretch por defecto)

El contenedor sigue siendo un bloque por fuera — ocupa el ancho completo de su padre. display: flex cambia el comportamiento de sus hijos, no el suyo propio.

`flex-direction` — elegir el eje

flex-direction define en qué dirección fluyen los ítems:

.contenedor {
  display: flex;
  flex-direction: row;            /* → fila de izquierda a derecha (por defecto) */
  flex-direction: row-reverse;    /* ← fila de derecha a izquierda */
  flex-direction: column;         /* ↓ columna de arriba a abajo */
  flex-direction: column-reverse; /* ↑ columna de abajo a arriba */
}

Con row: los ítems se apilan en fila horizontal. Con column: se apilan verticalmente. Esta decisión define el eje principal del contenedor — y todo lo que viene después (justify-content, align-items) actúa relativo a ese eje.

`gap` — separación moderna entre ítems

gap crea espacio entre los ítems (nunca en los bordes del contenedor). Es la forma moderna de separar elementos en Flexbox.

.nav {
  display: flex;
  gap: 16px; /* 16px entre cada ítem, en cualquier dirección */
}

¿Por qué gap y no margin? Con márgenes entre ítems, el primer y último ítem quedan pegados al borde — hay que resetear esos márgenes con hacks. Con gap, el espacio solo existe entre ítems, nunca en los extremos.

También podés controlar los ejes por separado con row-gap (entre filas) y column-gap (entre columnas).

Tu turno: activá Flexbox en .nav-horizontal con dirección fila y 16px de gap; en .menu-vertical con dirección columna y 8px de gap. Observá el cambio en el preview y comprobá con el botón “Comprobar”.