La propiedad CSS flex-direction especifica cómo colocar los objetos flexibles en el contenedor flexible definiendo el eje principal y la dirección (normal o al revés).

Tenga en cuenta que el valor de row y  row-reverse se verán afectados por la direccionalidad del contenedor flexible. Si su atributo dir es ltr, row representa el eje horizontal orientado de  izquierda a derecha, y row-reverse desde la derecha hacia la izquierda; si el atributo dir es rtl, row representa el eje orientado de derecha a izquierda, y  row-reverse de izquierda a derecha.

Sintaxis

/* La dirección del texto se presenta en una línea */
flex-direction: row;

/* Como <row>, pero al revés */
flex-direction: row-reverse;

/* La dirección en la que se apilas las líneas de texto */
flex-direction: column;

/* Como <column>, pero al revés */
flex-direction: column-reverse;

/* Valores globales */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

Valores

Se aceptan los siguientes valores:

row
El eje principal del contenedor flexible está definido para ser el mismo que la dirección del texto. Los puntos principales de inicio y final son los mismos que la dirección del contenido.
row-reverse

Se comporta igual que row pero los puntos principales de inicio y final son intercambiados.

column
El eje principal del contenedor flexible es el mismo que el eje del bloque. Los puntos principales de inicio y final son los mismos que los puntos de antes y después del modo escritura.
column-reverse
Se comporta igual que row pero los puntos principales de inicio y final son intercambiados.

Sintaxis formal

row | row-reverse | column | column-reverse

Ejemplo

HTML

<h4>Esto es un Column-Reverse</h4>
<div id="content">
    <div class="box" style="background-color:red;">A</div>
    <div class="box" style="background-color:lightblue;">B</div>
    <div class="box" style="background-color:yellow;">C</div>
</div>
<h4>Esto es un Row-Reverse</h4>
<div id="content1">
    <div class="box1" style="background-color:red;">A</div>
    <div class="box1" style="background-color:lightblue;">B</div>
    <div class="box1" style="background-color:yellow;">C</div>
</div>

CSS

#content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  -webkit-flex-direction: column-reverse;
  display: flex;
  flex-direction: column-reverse;
}

.box {
  width: 50px;
  height: 50px;
}

#content1 {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  -webkit-flex-direction: row-reverse;
  display: flex;
  flex-direction: row-reverse;
}

.box1 {
  width: 50px;
  height: 50px;
}

Resultado

Sobre Accesibilidad

Si utilizas flex-direction con un valor de row-reverse o column-reverse en elementos que necesitan foco (como botones) el orden de visualización será distinto al orden el DOM, por lo que los usuarios de lectores de pantalla no verán reflejado el mismo orden de los elementos que un usuario vidente. Para más información (en inglés):

Specificaciones

 

Especificación Estado

Comentario

CSS Flexible Box Layout Module
La definición de 'flex-direction' en esta especificación.
Candidate Recommendation Definición inicial

Valor inicialrow
Applies toflex containers
Heredableno
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Compatibilidad de Navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Soporte básicoChrome Soporte completo 29
Soporte completo 29
Soporte completo 21
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Edge Soporte completo 12
Soporte completo 12
Soporte completo 12
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Firefox Soporte completo 20
Notas
Soporte completo 20
Notas
Notas Since Firefox 28, multi-line flexbox is supported.
Sin soporte 18 — 20
Deshabilitado
Deshabilitado From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Soporte completo 49
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Soporte completo 44
Prefijado Deshabilitado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Deshabilitado From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Soporte completo 11
Soporte completo 11
Soporte completo 10
Prefijado
Prefijado Requiere de un prefijo de vendedor : -ms-
Opera Soporte completo 12.1
Soporte completo 12.1
Soporte completo 15
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Safari Soporte completo 9
Soporte completo 9
Soporte completo 7
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
WebView Android Soporte completo 4.4
Soporte completo 4.4
Soporte completo Si
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Chrome Android Soporte completo 29
Soporte completo 29
Soporte completo 25
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Edge Mobile Soporte completo Si
Soporte completo Si
Soporte completo Si
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Firefox Android ? Opera Android Soporte completo 12.1
Soporte completo 12.1
Soporte completo 15
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Safari iOS ? Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Compatibility unknown  
Compatibility unknown
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: evaferreira, Manuel-Kas, joshitobuba, fscholz, Sebastianz, elkinbernal
Última actualización por: evaferreira,