Características flex-direction en CSS

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 inicialrow
Aplicado aContenedores flexibles.
HeredableNo
MóvilNo
Valor calculadoComo 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 rowrow-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 rowrow-reversecolumncolumn-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ísticaChromeFirefoxIEÓperaSafari
Soporte básico29,020,01112,59.0

Las versiones anteriores de algunos navegadores (como Chrome, IE y Safari) admitían flexbox pero con un uso anterior ( -webkit--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-basisflex-flowflex-grow, flex-shrinkflex-wrap.
  • La página de cada una de las propiedades widthheight 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.