flex-direction

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 inicial	`row`
Applies to	flex containers
Heredable	no
Media	visual
Valor calculado	como se especifica
Animatable	no
Canonical order	el 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

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

Uso de cajas flexible CSS