flex-direction

flex-direction es la propiedad que determina en qué dirección fluyen los ítems dentro de un contenedor flex. Define el eje principal — el eje a lo largo del cual se colocan los ítems uno tras otro — y con él, de forma implícita, el eje cruzado, que siempre es perpendicular. Esta única decisión tiene efecto cascada sobre todas las demás propiedades de alineación: justify-content siempre actúa sobre el eje principal, y align-items siempre actúa sobre el eje cruzado. Cuando cambiás flex-direction, esos ejes rotan y el efecto visual de ambas propiedades cambia aunque su código no se toque.

El valor por defecto es row, que organiza los ítems en una fila horizontal de izquierda a derecha. Este comportamiento refleja el flujo de lectura occidental. Cambiar a column apila los ítems verticalmente — útil para listas de navegación lateral, acordeones o cualquier contenido que deba apilarse en lugar de alinearse. Los valores *-reverse invierten el sentido sin cambiar qué eje es el principal.

Entender flex-direction es condición para entender el resto de Flexbox. Es el primer ajuste que hacés al definir un contenedor flex, y todos los demás se calibran a partir de él.

Cómo funciona

flex-direction afecta directamente qué significan los términos main-start, main-end, cross-start y cross-end del modelo de Flexbox. Con row, main-start está a la izquierda y main-end a la derecha (en sistemas LTR). Con column, main-start está arriba y main-end abajo. Los valores *-reverse invierten main-start y main-end sin tocar el eje cruzado.

La consecuencia práctica más importante: si usás flex-direction: column, justify-content: center ya no centra horizontalmente — centra verticalmente, porque el eje principal ahora es vertical. Del mismo modo, align-items: center pasaría a centrar horizontalmente. Este intercambio es el punto que más confunde al empezar con Flexbox.

Sintaxis

.contenedor {
  display: flex;
  flex-direction: row;            /* valor por defecto */
  flex-direction: row-reverse;
  flex-direction: column;
  flex-direction: column-reverse;
}

Valores

row (valor por defecto)

Los ítems se disponen en fila, de izquierda a derecha (en documentos LTR). El eje principal es horizontal; el cruzado es vertical. Es el comportamiento que asume el navegador si no se declara flex-direction.

Cuándo usarlo: barras de navegación, grupos de botones, listas de etiquetas, cualquier contenido que debe alinearse horizontalmente.

row-reverse

Igual que row pero el orden se invierte: los ítems fluyen de derecha a izquierda. El primer ítem en el HTML aparece a la derecha visualmente.

Gotcha: el orden visual cambia pero el orden de tabulación del teclado y los lectores de pantalla siguen el orden del HTML — puede generar confusión de accesibilidad si se abusa.

column

Los ítems se apilan verticalmente, de arriba a abajo. El eje principal es ahora vertical; el cruzado es horizontal. justify-content controla la distribución vertical y align-items controla la alineación horizontal.

Cuándo usarlo: menús de navegación lateral, listas de opciones en columna, layouts donde los ítems deben apilarse.

column-reverse

Igual que column pero los ítems fluyen de abajo a arriba. El primer ítem del HTML aparece en la parte inferior.

Ejemplo realista

/* Barra de navegación horizontal */
.nav-horizontal {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

/* Menú lateral vertical */
.menu-lateral {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

Cuándo usar cada valor

Notas, gotchas e interacción

• El eje rota con flex-direction. justify-content siempre actúa sobre el eje principal; align-items siempre actúa sobre el cruzado. Con column, justify-content: center centra verticalmente — no horizontalmente. Este es el malentendido más frecuente al aprender Flexbox.
• *-reverse afecta accesibilidad. Los valores row-reverse y column-reverse cambian el orden visual pero no el orden en el DOM. Los lectores de pantalla y la navegación por teclado siguen el orden HTML. Si el orden visual importa para la comprensión, es mejor reordenar el HTML directamente.
• Interacción con flex-wrap. flex-wrap también puede invertir el sentido de las líneas adicionales con wrap-reverse, independientemente de flex-direction. Son ortogonales.
• writing-mode y direction. En idiomas con escritura de derecha a izquierda (RTL) o de arriba a abajo, flex-direction: row sigue el modo de escritura — main-start podría estar a la derecha. En proyectos multilingüe, tenerlo en cuenta.
• No afecta al elemento contenedor. flex-direction solo cambia cómo se organizan los hijos. El contenedor en sí sigue siendo bloque o inline según su propio display.

Vigente / legacy

flex-direction forma parte de la especificación Flexbox Level 1, ampliamente soportada. No hay alternativa legacy: el comportamiento que flex-direction: column produce era irreproducible limpiamente antes de Flexbox. No se necesitan prefijos de vendor en proyectos modernos.