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

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 inicial0
Applies toFlex items, grid items, and absolutely-positioned flex and grid container children
Heredableno
Valor calculadocomo se especifica
Animation typean 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 = 
<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

must be provided

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:

Especificaciones

Specification
CSS Display Module Level 3
# order-property

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
order

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Ver también