Propiedad CSS order

La propiedad order controla la posición de un elemento flex o grid a lo largo de su eje, permitiéndote cambiar el orden visual de los elementos sin modificar su orden en el HTML. Forma parte del módulo de diseño de caja flexible y es una de las propiedades CSS3.

Por defecto, cada elemento tiene order: 0, por lo que los elementos aparecen en el orden del código fuente. Los elementos se disponen en orden ascendente según el valor de order; los que tienen el mismo valor mantienen su orden en el código fuente entre sí. Esto hace que order sea útil para tareas como mover una barra lateral antes del contenido principal en pantallas anchas, o reordenar tarjetas dentro de un diseño de Flexbox o CSS Grid, sin modificar el marcado.

Información

order solo afecta a los hijos directos de un contenedor flex o grid. Si el elemento no es un elemento flex o grid, order no tiene efecto.

Cómo funcionan los valores

order acepta cualquier número entero, incluidos valores negativos:

Un elemento con un order menor aparece primero; uno con un order mayor aparece después.
Como el valor inicial es 0, asignar -1 a un elemento es una forma rápida de colocarlo antes que todos los demás.
Los elementos que comparten el mismo valor de order recurren a su orden en el DOM, por lo que normalmente solo necesitas establecer order en los pocos elementos que deseas mover.

.first  { order: -1; } /* moves before all default (0) items */
.middle { order:  0; } /* default, can be omitted */
.last   { order:  1; } /* moves after all default items */

Consideraciones de accesibilidad

order crea una desconexión entre la presentación visual del contenido y su orden en el DOM. La reorganización visual no modifica el DOM, por lo que no cambia el orden de lectura para los lectores de pantalla ni el orden de tabulación para los usuarios de teclado. Alguien que navegue con la tecla Tab o utilice un lector de pantalla seguirá el orden original del código fuente, no el orden visual reorganizado — lo que puede resultar confuso si ambos difieren significativamente. Mantén el DOM en un orden de lectura lógico y usa order solo para ajustes de presentación.

Valor inicial	0
Se aplica a	Elementos flex y elementos grid.
Heredable	No.
Animable	No. La propiedad order es discreta y no es animable.
Versión	CSS3
Sintaxis DOM	Object.style.order = "4";

Sintaxis

Sintaxis CSS de order

order: number | initial | inherit;

Ejemplo de la propiedad order:

Ejemplo de código CSS con order

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        width: 400px;
        height: 200px;
        border: 1px solid #000;
        display: flex;
      }
      #example div {
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: #fff;
        font-size: 30px;
        font-family: sans-serif;
      }
      div#blue {
        order: 2;
      }
      div#green {
        order: 3;
      }
      div#grey {
        order: 1;
      }
      div#yellow {
        order: 4;
      }
    </style>
  </head>
  <body>
    <h2>Order property example</h2>
    <div id="example">
      <div style="background-color: #1c87c9;" id="blue">1</div>
      <div style="background-color: #8ebf42;" id="green">2</div>
      <div style="background-color: #666;" id="grey">3</div>
      <div style="background-color: #f4f442;" id="yellow">4</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad order aplicada a la clase contenedor:

Ejemplo de CSS order con Flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        padding: 0;
        margin: 0;
        list-style: none;
        display: flex;
        flex-flow: row wrap;
      }
      .box:nth-of-type(1) {
        order: 4;
      }
      .box:nth-of-type(2) {
        order: 1;
      }
      .box:nth-of-type(3) {
        order: 3;
      }
      .box:nth-of-type(4) {
        order: 5;
      }
      .box:nth-of-type(5) {
        order: 2;
      }
      .box {
        background: #1c87c9;
        padding: 5px;
        width: 100px;
        height: 100px;
        margin: 5px;
        line-height: 100px;
        color: #eee;
        font-weight: bold;
        font-size: 2em;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Order property</h2>
    <ul class="container">
      <li class="box">1</li>
      <li class="box">2</li>
      <li class="box">3</li>
      <li class="box">4</li>
      <li class="box">5</li>
    </ul>
  </body>
</html>

Pruébalo tú mismo »

En ambos ejemplos, la propiedad order reorganiza los elementos en pantalla mientras el HTML permanece en su secuencia original — a cada elemento simplemente se le asigna el número que lo coloca donde se desea.

order es una de las varias herramientas de alineación de Flexbox. Combínala con flex-direction para establecer el eje principal, justify-content para espaciar los elementos a lo largo de ese eje, y align-items para alinearlos en el eje transversal.

Valores

Valor	Descripción
number	Define el orden del elemento flex o grid dentro del contenedor. El valor predeterminado es 0.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad del elemento padre.

Práctica

¿Qué hace la propiedad CSS 'order'?

Se usa para ordenar los elementos flex a lo largo del eje principal.Permite que un elemento se comporte como un elemento de bloque.Se usa para especificar la alineación vertical de un elemento en línea o de una celda de tabla.Establece el orden de aparición de un elemento dentro de un contenedor.