- Teoría
- Teoría
El orden visual con order
Ya convertimos las tarjetas en contenedores flex y colocamos sus elementos de arriba hacia abajo. Ahora podemos intercambiar el encabezado y la imagen para que coincidan con el diseño.
Para cambiar el orden visual de los elementos usamos order. Esta propiedad acepta un número entero, que puede ser positivo, negativo o cero. De manera predeterminada, todos los elementos tienen order igual a cero.
.element {
order: 5;
}Los elementos se colocan del valor de order más bajo al más alto. Si varios tienen el mismo valor, se respeta su orden en el HTML.
Veamos un ejemplo con cuatro bloques de distintos colores:
Usaremos order para cambiar su orden:
.green {
order: 1;
}
.orange {
order: 0;
}
.blue {
order: -1;
}
.pink {
order: 0;
}Los bloques quedarán en este orden:
El bloque azul aparece primero porque tiene el menor valor de order. Los bloques naranja y rosa tienen el siguiente valor, pero el naranja está antes en el HTML. El verde tiene el valor más alto y por eso aparece al final.
Queremos que la imagen sea el primer elemento de la tarjeta. Como todos los elementos tienen order igual a cero, basta con darle a la imagen un valor menor que cero. Sirve cualquier número entero negativo; usaremos -1 para hacerlo sencillo.
Probemos distintos valores de order para entender cómo funciona. Después intercambiaremos el encabezado y la imagen.
order solo cambia el orden dentro del contenedor padre. No permite, por ejemplo, mover un elemento del encabezado de la página al pie.
- index.html
- style.css
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
- Crea una regla para la clase
imagey agregaordercon el valor1. Las imágenes pasarán al final de las tarjetas. - Cambia el valor de
ordera0. Las imágenes volverán a su posición anterior. - Ahora cambia el valor a
-1. Las imágenes pasarán al principio.