flex-direction

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
Animatableno
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
The definition of 'flex-direction' in that specification.
Candidate Recommendation  

Compatibilidad de Navegadores

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 No support
Característica Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Soporte Básico ? ? No support 12.10 No support

[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,