flex-direction
==============

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
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).

Pruébalo
--------

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


```css
/\* 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
```

flex-direction =   
  row             |  
  row-reverse     |  
  column          |  
  column-reverse    
  
```

Ejemplo
-------

### HTML


```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


```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

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

* Flexbox & the keyboard navigation disconnect — Tink
* Source Order Matters | Adrian Roselli
* MDN Understanding WCAG, Guideline 1.3 explanations
* Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0
Especificaciones
----------------

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-direction-property |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* Guía de CSS Flexbox: *Conceptos básicos de Flexbox*
* Guía de CSS Flexbox: *Ordenar items flex (en-US)*