Propiedad order de CSS

La propiedad order se utiliza para especificar el orden de un elemento flexible dentro de un contenedor flex o grid.

La propiedad order forma parte del módulo Flexible Box Layout.

La propiedad order es una de las propiedades CSS3.

INFO

Si el elemento no es un elemento flexible, la propiedad order no funciona.

Preocupaciones de Accesibilidad

La propiedad order crea una desconexión entre la visualización visual del contenido y el orden del DOM. La reordenación visual no cambia el orden del DOM, lo que afecta la navegación con lectores de pantalla. Los usuarios que dependen de tecnología de asistencia (por ejemplo, lectores de pantalla) experimentarán el orden original del DOM, no el diseño reordenado visualmente.

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

css

order: number | initial | inherit;

Ejemplo de la propiedad `order`:

Ejemplo de código CSS de order

html

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

Try it Yourself »

Resultado

Order property

Ejemplo de la propiedad `order` aplicada a la clase contenedor:

Ejemplo de flexbox CSS con order

html

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

Try it Yourself »

En los ejemplos mencionados anteriormente, la propiedad order define el orden para los elementos flex o grid. Según el requisito del usuario, se asigna un número a cada elemento.

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 utilice su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad CSS 'order'?

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

Propiedad order de CSS ​

Preocupaciones de Accesibilidad ​

Sintaxis ​

Ejemplo de la propiedad order: ​

Resultado ​

Ejemplo de la propiedad order aplicada a la clase contenedor: ​

Valores ​

Práctica ​