--- title: flex-direction slug: Web/CSS/flex-direction tags: - CCS - Cajas Flexibles CSS - Propiedad CSS - Referencia - flexbox translation_of: Web/CSS/flex-direction ---

{{CSSRef}}

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

{{EmbedInteractiveExample("pages/css/flex-direction.html")}}

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 column pero los puntos principales de inicio y final son intercambiados.

Sintaxis formal

{{csssyntax}}

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

{{ EmbedLiveSample('Example', '', '300', '', 'Web/CSS/flex-direction') }}

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
{{ SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction') }} {{ Spec2('CSS3 Flexbox') }} Definición inicial

{{cssinfo}}

Compatibilidad de Navegadores

{{Compat("css.properties.flex-direction")}}

Ver también