Propiedad CSS flex-direction

La propiedad flex-direction establece el eje principal de un contenedor flex, que es la dirección a lo largo de la cual se distribuyen sus elementos flex. Al cambiar el eje principal entre horizontal y vertical (y opcionalmente invirtiéndolo), una sola propiedad controla si los elementos fluyen en fila o en columna. Es una de las propiedades CSS3 y forma parte del módulo de Diseño de Caja Flexible.

La propiedad no tiene efecto por sí sola — el elemento debe ser primero un contenedor flex, lo cual se crea con display: flex (o inline-flex). Una vez configurado, cada hijo directo se convierte en un elemento flex que sigue la dirección elegida.

Los elementos flex pueden mostrarse:

horizontalmente de izquierda a derecha (flex-direction: row) o de derecha a izquierda (flex-direction: row-reverse)
verticalmente de arriba a abajo (flex-direction: column) o de abajo a arriba (flex-direction: column-reverse)

Eje principal y eje transversal

Flexbox siempre trabaja con dos ejes. El eje principal es el que elige flex-direction; los elementos se colocan uno tras otro a lo largo de él. El eje transversal corre perpendicular a él. Esto importa porque las propiedades de alineación dependen de cuál eje es cuál:

justify-content alinea los elementos a lo largo del eje principal.
align-items alinea los elementos a lo largo del eje transversal.

Por lo tanto, cuando estableces flex-direction: column, el eje principal se vuelve vertical — y justify-content ahora controla el posicionamiento vertical mientras que align-items controla el posicionamiento horizontal. Usar la propiedad incorrecta es el error más común con Flexbox, y casi siempre se debe al valor de flex-direction que está en efecto.

Los valores *-reverse invierten el orden en que se pintan los elementos, pero no cambian el orden de origen de tu HTML — algo importante para la accesibilidad, ya que los lectores de pantalla y el foco del teclado siguen el orden del DOM, no el visual.

Información

Si no hay elementos flex (el contenedor no tiene hijos directos), la propiedad flex-direction no tiene ningún efecto visible.

Valor inicial	row
Se aplica a	Contenedores flex.
Heredable	No.
Animatable	No.
Versión	CSS3
Sintaxis DOM	object.style.flexDirection = "row-reverse";

Sintaxis

Sintaxis de la propiedad CSS flex-direction

flex-direction: row | row-reverse | column | column-reverse | initial | inherit;

Ejemplo de la propiedad flex-direction:

Ejemplo de la propiedad CSS flex-direction con el valor column-reverse

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

En el siguiente ejemplo, los elementos se muestran horizontalmente en fila de derecha a izquierda.

Ejemplo de la propiedad flex-direction con el valor "row-reverse":

Ejemplo de la propiedad CSS flex-direction con el valor row-reverse

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row-reverse;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

La siguiente imagen muestra los elementos en orden inverso de derecha a izquierda.

Ejemplo de la propiedad flex-direction con el valor "row":

Ejemplo de la propiedad flex-direction con el valor "row"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad flex-direction con el valor "column":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #DC143C;">A</div>
      <div style="background-color: #0000CD;">B</div>
      <div style="background-color: #9ACD32;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo de la propiedad flex-direction con el valor "column-reverse":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 340px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse;
      }
      .example div {
        width: 60px;
        height: 60px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #DC143C;">A</div>
      <div style="background-color: #0000CD;">B</div>
      <div style="background-color: #9ACD32;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Cuándo usar cada valor

row (predeterminado) — barras de navegación horizontales, grupos de botones y cualquier "lista de elementos de izquierda a derecha." Raramente se escribe explícitamente ya que es el valor predeterminado.
column — apilar tarjetas, campos de formulario o elementos de barra lateral verticalmente mientras se mantiene el control de alineación y gap de Flexbox. Un patrón común es un diseño de página de altura completa: display: flex; flex-direction: column; min-height: 100vh con un encabezado, un área principal con flex: 1 y un pie de página.
row-reverse / column-reverse — invertir el orden visual sin tocar el HTML, por ejemplo, reflejando un diseño para idiomas de derecha a izquierda o mostrando el mensaje de chat más reciente abajo mientras se mantiene el DOM en orden cronológico.

Un atajo relacionado, flex-flow, establece flex-direction y flex-wrap en una sola declaración — útil cuando también necesitas que los elementos se ajusten en múltiples líneas.

Compatibilidad con navegadores

flex-direction es compatible con todos los navegadores modernos sin prefijo de proveedor. Forma parte del modelo Flexbox más amplio tratado en la Guía Definitiva de Flexbox.

Valores

Valor	Descripción	Pruébalo
row	Los elementos se muestran horizontalmente en fila. Este es el valor predeterminado de esta propiedad.	Pruébalo »
row-reverse	Los elementos se muestran en fila en orden inverso (de derecha a izquierda).	Pruébalo »
column	Los elementos se muestran verticalmente de arriba a abajo.	Pruébalo »
column-reverse	Los elementos se muestran verticalmente de abajo a arriba.	Pruébalo »
initial	La propiedad usa su valor predeterminado.	Pruébalo »
inherit	La propiedad hereda el valor de su elemento padre.	Pruébalo »

Práctica

¿Cuáles de los siguientes son valores válidos para la propiedad CSS flex-direction?