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

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico21 -webkit-

12

12 -webkit-

201

18 — 202

49 -webkit-

44 -webkit- 3

11

10 -ms-

12.1

15 -webkit-

9

7 -webkit-

FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico ? ?

Si

Si -webkit-

?

12.1

15 -webkit-

? ?

1. Since Firefox 28, multi-line flexbox is supported.

2. 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.

3. 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.

Ver también

Etiquetas y colaboradores del documento

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