Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Resumen

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 invertida).

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.

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

Consulte Uso de cajas flexibles CSS para más propiedades e información.

Sintaxis

Formal syntax: row | row-reverse | column | column-reverse
flex-direction: row
flex-direction: row-reverse
flex-direction: column
flex-direction: column-reverse

flex-direction: inherit

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.

Ejemplos

element { 
  flex-direction: row-reverse;
}

Especificaciones

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

Compatibilidad de Navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Firefox (Gecko) Chrome Internet Explorer Opera Safari
Soporte Básico 18.0 (18.0) (behind a pref) [1] [2]
20.0 (20.0) [2]
21.0-webkit 11 12.10 Sin soporte
Característica Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Soporte Básico ? ? Sin soporte 12.10 Sin soporte

[1] Para activar el soporte a Firefox 18 y 19, el usuario tiene que cambiar en preferencias about:config  "layout.css.flexbox.enabled" a true.

[2] Las cajas flexible multi-líneas están soportadas desde Firefox 28.

Ver también

Etiquetas y colaboradores del documento

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