order
=====

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

La propiedad CSS **`order`** especifica el orden utilizado para disponer los elementos en su contenedor flexible. Los elementos estarán dispuestos en orden ascendente según el valor de `order`. Los elementos con el mismo valor de `order` se dispondrán en el orden en el cual aparecen en el código fuente.

**Nota:** `order` sólo pretende afectar el orden visual de los elementos y no su orden lógico u orden de tabulación. **`order`** no se debe usar en un medio no visual tal como un speech (sintetizador de voz).

|  |  |
| --- | --- |
| Valor inicial | `0` |
| Applies to | Flex items, grid items, and absolutely-positioned flex and grid container children |
| Heredable | no |
| Valor calculado | como se especifica |
| Animation type | an integer |

Ver Uso de cajas flexibles de CSS para más propiedades e información.

Sintaxis
--------


```css
/\* Valor numérico incluyendo números negativos \*/
order: 5;
order: -5;

/\* Valores Globales \*/
order: inherit;
order: initial;
order: unset;
```

### Valores

`<integer>`

Representa el grupo ordinal al que el elemento flexible ha sido asignado.

### Sintaxis formal
```

order =   
  [ <'layout-order'> <'reading-order'>? ]  |  
  [ [ reading || layout ] && <integer> ]     
  
```

Ejemplos
--------

Aquí tiene un trozo de HTML básico:


```html
<!doctype html>
<header>...</header>
<div id="main">
  <article>Article</article>
  <nav>Nav</nav>
  <aside>Aside</aside>
</div>
<footer>...</footer>
```


El siguiente código CSS debería crear un diseño clásico de dos barra laterales que rodea a un bloque de contenido. EL Módulo de Diseño de Caja Flexible crea automáticamente bloques de tamaño vertical igual y utiliza todo el espacio horizontal disponible.


```css
#main {
  display: flex;
  text-align: center;
}
#main > article {
  flex: 1;
  order: 2;
}
#main > nav {
  width: 200px;
  order: 1;
}
#main > aside {
  width: 200px;
  order: 3;
}
```

### Resultado

Sobre Accesibilidad
-------------------

Utilizar la propiedad `order` rompe la conexión entre la presentación visual y el order original de los elementos en el DOM. Esto afecta de forma negativa a los usuarios que navegan a través de teclado utilizando, por ejemplo, un lector de pantalla. Si el orden visual (CSS) es importante, entonces los lectores de pantallas no podrán acceder a ese dato y recorrerán los elementos de forma desordenada.

Para más información por favor, referirse a estos artículos:

* 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 Display Module Level 3 # order-property |

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

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

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

* Uso de cajas flexibles de CSS