Características order en CSS

La propiedad order CSS especifica el orden de los elementos flexibles en el contenedor. Los elementos se ordenarán en orden ascendente según el valor de la propiedad de orden que se les asigne, y los elementos del mismo valor se ordenarán según su ocurrencia en el código fuente.

Funciones order css

Valor inicial	`0`
Aplicado a	Contenedores flexibles.
Heredable	No
Móvil	Sí
Valor calculado	Como se especificó.

/* Valores numéricos, incluidos números negativos */ 
orden :  5 ; 
orden :  -5 ; 
/* valores globales */ 
order: inherit;
order: initial;
order: unset;

Nota: La propiedad order está destinada a afectar la disposición visual de los elementos, no la disposición lógica u organizativa, y la propiedad no se puede utilizar order en datos que no son visibles, como texto de lectura fonética.

Ejemplos y aplicaciones en código

Supongamos que tenemos un documento HTML que consta de una sección de encabezado <header>, un artículo <article>, un cuadro de navegación <nav>, un cuadro lateral <aside> y pie de página <footer>, y el código HTML es el siguiente:

< head > ... </ head > 
< div id = 'Principal' > 
  < article > Artículo </ article > 
  < nav > Navegación </ nav > 
  < aside > Cuadro lateral </ aside > 
</ div > 
< footer > ... </ footer >

Tenga en cuenta que el orden de la sección principal de la página es <article>, <nav> y <aside>, pero queremos cambiar el orden de aparición de modo que la barra lateral se muestra por primera vez (en el extremo izquierdo si es la orientación de página ltr), y vamos a utilizar la propiedad order para hacer esto como en el siguiente código 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; }

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	29,0	20,0	11	12,5	9.0

Las versiones anteriores de algunos navegadores (como Chrome, IE y Safari) admitían flexbox pero con un uso anterior ( -webkit-o -ms-).

Características generales

La propiedad acepta order una de las siguientes palabras reservadas.

<integer>

Los elementos flex se colocarán en una sola línea, lo que puede hacer que el contenido se salga de su contenedor si no cabe en él.

Estructura order css

order: <integer>;

Consulte también

Propiedad flex Página La página de sub-propiedades que esta conjuntos de propiedades son: flex-basis, flex-direction, flex-flow, flex-grow, flex-shrink y flex-wrap
La página de propiedades grid que establece todas las propiedades que definen claramente las propiedades de la red.
La página de propiedades justify-content que define cómo el navegador distribuye el espacio entre y alrededor de los elementos a lo largo del eje principal del contenedor flexible.