Flexbox es un sistema de disposición de elementos que entró al mundo del desarrollo web en 2009. Aunque se puede considerar relativamente nueva, Flexbox ha probado ser una herramienta poderosa para ubicar elementos y crear diseños complejos. En este post, te presentamos la propiedad order de Flexbox, ideal para diseños con múltiples elementos.
Antes de presentarte cómo funciona la propiedad order de Flexbox, es importante que te expliquemos la lógica detrás de este sistema de disposición de elementos.
En Flexbox existen dos tipos de propiedades: aquellas que afectan al contenedor y aquellas que afectan al elemento contenido. Ya te hemos presentado algunas propiedades que afectan al contenedor en otros posts: flex-direction, flex-flow, flex-wrap, justify-content, align-items, gap y align-content. Aunque en estos posts te explicamos en profundidad cómo funciona cada propiedad, te invitamos a revisar los diagramas de esta guía sobre todas las variedades que existen en Flexbox, pues complementan perfectamente nuestra información.
La propiedad flex-direction, que determina la dirección en que el navegador pinta los elementos, afecta a la mayoría de las propiedades de Flexbox. Esta propiedad determina el eje principal de la página web, que puede ser el eje x o el eje y en cualquier dirección. La opción row es el valor por defecto y ordena los elementos de izquierda a derecha, mientras que row-reverse los ordena de derecha a izquierda. Por otro lado, la opción column ordena los elementos de arriba abajo y la opción column-reverse los ordena de abajo arriba.
La propiedad order de Flexbox afecta a los elementos hijos o flex items dentro de un contenedor en relación al eje principal determinado por flex-direction. A continuación, te explicamos cómo funciona la propiedad order de Flexbox y para qué es útil.
¿Cómo funciona la propiedad order de Flexbox?
La propiedad order de Flexbox nos permite establecer, como su nombre indica, el orden en el que se van a cargar nuestros elementos HTML en la página web. Este orden se establece mediante un valor numérico, sea negativo o positivo. Es decir, el posicionamiento del elemento dependerá de su valor y su relación con los valores de los demás elementos; el elemento se cargará más cerca al inicio del eje principal cuanto menor sea su valor.
El valor por defecto de esta propiedad, para todos los elementos, es de 1. Cuando hay varios elementos con el mismo valor, el navegador los ordena en el eje principal en función de cómo están escritos en nuestro código. El primero en el código será el primero que se pinta en la página web. Por ello, podríamos darle un valor solo al elemento que queramos mover, teniendo en cuenta que los demás están posicionados como 1.
Te aconsejamos tener mucho cuidado con la propiedad order de Flexbox. En KeepCoding no creemos que sea recomendable utilizarla frecuentemente, debido a que cambiar el orden visual de los elementos puede generar confusión con el orden real del contenido. Primero, porque cualquier lector automático que lea el contenido e ignore el CSS va a leer los elementos en un orden distinto al que se ve en la página web. Segundo, porque cuando el usuario seleccione varios elementos en el sitio web, el cursor seleccionará en el orden del código, no en el orden visual. Esto puede generar una mala experiencia de usuario, alejándolo de nuestro sitio web.
Ahora que sabes cómo utilizar la propiedad order de Flexbox, ¡es la hora de que juegues con el orden de los elementos de tu propia página web! Por ello, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, donde encontrarás la mezcla perfecta de teoría y práctica. Allí, además de seguir aprendiendo sobre los lenguajes de programación web, crearás y diseñarás tu propia página web con la ayuda de nuestros expertos profesores. ¡No te lo pierdas!
