Propiedad order y reordenación visual
Cambie el orden visual de los flex items sin modificar el DOM mediante la propiedad order.
Propiedad order y reordenación visual es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
La propiedad order
La propiedad order cambia el orden visual de los elementos flex y grid sin modificar la estructura del DOM. El valor predeterminado es 0; los valores mayores aparecen después y los valores negativos aparecen antes.
Conceptos básicos de order
Los elementos se muestran desde el valor de order más bajo hasta el más alto. Los elementos con el mismo valor de order aparecen según el orden del DOM.
<div class="nav">
<span class="nav-button">Button</span>
<span class="nav-logo">Logo</span>
<span class="nav-links">Links</span>
</div>
Order negativo
Use valores negativos para colocar un elemento antes que todos los elementos predeterminados (order:0):
<div class="list">
<div>Item 1</div>
<div class="sticky-first">Sticky</div>
<div>Item 2</div>
</div>
Reordenación adaptable
Cambie el orden visual en distintos puntos de interrupción sin modificar el HTML:
<div class="layout">
<main class="main-content">Main</main>
<aside class="sidebar">Sidebar</aside>
</div>
Importante: advertencia de accesibilidad
order solo cambia el orden visual. Los lectores de pantalla y la navegación con teclado siguen el orden del DOM, no el orden visual. Para garantizar la accesibilidad, es fundamental reordenar visualmente los elementos manteniendo el DOM en un orden lógico de lectura.
Incoherencia en el orden de tabulación
Si reordena visualmente los elementos con order, el foco de la tecla Tab sigue el orden del DOM, que puede diferir del orden visual. Esto crea una navegación confusa para los usuarios de teclado. Use la reordenación visual únicamente cuando no altere la secuencia lógica.
Casos de uso legítimos habituales
La reordenación visual es aceptable cuando:
- Los elementos no forman parte de una secuencia navegable (ordenación decorativa)
- El orden visual coincide con un flujo de lectura natural que difiere del orden del código fuente por motivos de organización del código
order en Flexbox frente a order en Grid
La propiedad order funciona de forma idéntica tanto en Flexbox como en CSS Grid. Controla el orden dentro del algoritmo de diseño, no el del DOM.
order con Flex-wrap
Cuando los elementos pasan a líneas nuevas, order determina qué elementos aparecen en cada línea y en qué secuencia dentro de ella.
Invertir todos los elementos
Para invertir todos los elementos, utilice flex-direction: row-reverse o column-reverse en lugar de asignar valores negativos de order a cada elemento. Es una solución más semántica y sencilla.
<div class="reversed-list">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Animación con order
Los cambios de order no se pueden animar en CSS. Si necesita animar el reordenamiento, utilice transformaciones o animaciones controladas por JavaScript, como Flip.js o el complemento Flip de GSAP.
Comprobación rápida
¿Por qué debe utilizarse con precaución la propiedad order para reordenar enlaces de navegación?
Resumen
order cambia la posición visual de los elementos flex/grid sin modificar el HTML. El valor predeterminado es 0; los valores menores aparecen primero y los mayores, al final. Utilícelo para cambiar el orden de forma responsive sin modificar la estructura del DOM. Al utilizar order para reordenar, compruebe siempre que el orden de navegación con teclado y el de los lectores de pantalla sigan siendo lógicos.
Preguntas frecuentes
¿La lección «Propiedad order y reordenación visual» es gratis?
Sí — el texto completo de «Propiedad order y reordenación visual» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Propiedad order y reordenación visual»?
Cambie el orden visual de los flex items sin modificar el DOM mediante la propiedad order. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Propiedad order y reordenación visual»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Anulación de la alineación de flex items con align-self
- Propiedad order y reordenación visual
- Patrones abreviados de flex
- Layouts habituales de Flexbox: navegación, tarjetas y objetos multimedia