order
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
/* 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:
<!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.
#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:
Especificaciones
Specification |
---|
CSS Display Module Level 3 # order-property |
Compatibilidad con navegadores
BCD tables only load in the browser