Características flex-direction en CSS

La propiedad flex-direction en CSS define cuál es el eje principal en un contenedor flexible y cuál es su orientación (normal o inversa).

Funciones flex-direction css

Valor inicial	`row`
Aplicado a	Contenedores flexibles.
Heredable	No
Móvil	No
Valor calculado	Como se especificó.

/* la orientación de los elementos es horizontal */ 
flex-direction :  row ;
/* La orientación de los elementos es horizontal, pero al revés */ 
flex-direction :  row-reverse ;
flex-direction :  column ;
/* La orientación de los elementos es vertical, pero al revés */ 
flex-direction: column-reverse;
/* valores globales */ 
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

Tenga en cuenta que los dos valores row y row-reverse influenciados por la dirección del contenedor flex, si la propiedad se dir establece en ltr(de izquierda a derecha, como en el idioma inglés), el valor de la row dirección del eje horizontal de izquierda a derecha, y row-reverse representará la horizontal dirección del eje de derecha a izquierda.

Pero si el valor dires igual rtl(es decir, de derecha a izquierda, como en árabe), representará rowel eje horizontal moviéndose de derecha a izquierda, y el valor lo row-reverse representará pero de izquierda a derecha.

Ejemplos y aplicaciones en código

Un ejemplo del uso de la propiedad flex-direction para establecer el eje principal y su dirección, y muestra el uso de las palabras reservadas row, row-reverse, column y column-reverse:

<div class="grid">
  <div class="col">
    <div class="row">
      <div class="cell">
        row
        <div class="container row">
          <span>A</span>
          <span>B</span>
          <span>C</span>
        </div>
      </div>
      <div class="cell">
        row-reverse
        <div class="container row-reverse">
          <span>A</span>
          <span>B</span>
          <span>C</span>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="cell">
        column
        <div class="container column">
          <span>A</span>
          <span>B</span>
          <span>C</span>
        </div>
      </div>
      <div class="cell">
        column-reverse
        <div class="container column-reverse">
          <span>A</span>
          <span>B</span>
          <span>C</span>
        </div>
      </div>
    </div>
  </div>
</div>

Código CSS:

.grid {
  width: 100%;
  min-height: 100%;
  display: flex;
  font: 1em monospace;
}
.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto;
}
.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
  height: auto;
}
.cell {
  margin: .5em;
  padding: .5em;
  background-color: #FFF;
  overflow: hidden;
  text-align: center;
  flex: 1 auto;
}
.container {
  background: #E4F0F5;
  padding: .5rem;
  margin: 0 auto;
  font-size: 1rem;
  display:flex;
  width: 11rem;
  height: 11rem;
}
.container span {
  display: block;
  padding: 1em;
  margin: .1em;
  border: 1px solid black;
  background: #CCC;
  flex: 1;
}
.row            { flex-direction: row; }
.row-reverse    { flex-direction: row-reverse; }
.column         { flex-direction: column; }
.column-reverse { flex-direction: column-reverse; }

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	29,0	20,0	11	12,5	9.0

Las versiones anteriores de algunos navegadores (como Chrome, IE y Safari) admitían flexbox pero con un uso anterior ( -webkit-o -ms-).

Características general

La propiedad acepta flex-direction uno de los siguientes valores:

row

El eje principal del contenedor flexible estará en la misma dirección que el texto, es decir, de izquierda a derecha si es dir igual ltr y de derecha a izquierda si es dir igual a rtl.

row-reverse

Tiene el mismo comportamiento que la palabra reservada rowpero con el comienzo y el final en el lado opuesto.

column

El eje principal del contenedor flexible será de arriba a abajo.

column -reverse

Tiene el mismo comportamiento que la palabra reservada column pero con el comienzo y el final en el lado opuesto.

Estructura flex-direction css

flex-direction: row | row-reverse | column | column-reverse;

Consulte también

Propiedad flex Página La página de sub-propiedades que esta conjuntos de propiedades son: flex-basis, flex-flow, flex-grow, flex-shrink y flex-wrap.
La página de cada una de las propiedades width, height que se encarga de configurar las dimensiones del elemento.
La página de propiedades position que describe cómo se debe colocar el elemento en el documento.