En esta quinta clase del curso de Flexbox, jugaremos con el orden de los distintos ítems flex dentro de su contenedor.
Hasta no hace tanto tiempo, si queríamos modificar el orden en el que se visualizaban los distintos elementos dentro de un layout, sólo podíamos hacerlo vía HTML. Esto es, en función del orden en el que escribíamos nuestro código de etiquetas, podíamos mostrar cada sección, elemento o ítem web en un orden u otro.
La llegada de flexbox ha supuesto una auténtica revolución por lo que respecta al orden de visualización de los componentes web por parte del usuario. ¡Vamos a ello!
¡Listo! ¿Has visto qué fácil es modificar el orden de visualización de los distintos ítems flex? Gracias a una única propiedad, súper fácil de comprender, podemos alterar el orden de visualización de un ítem en concreto (o de todos a la vez) en función de diversas situaciones que lo requieran.
Partiendo de la posición básica que ocupa cada elemento en el layout, podemos conseguir de forma extremadamente sencilla, que éste se muestre antes o después de lo que supuestamente le tocaría por HTML.
Como hemos visto, podemos alterar de forma muy fácil el orden de distintos elementos, por ejemplo, en una visualización responsive, que difiera de la visualización de escritorio.
En la siguiente clase, continuaremos aprendiendo propiedades de flexbox que nos facilitan tanto la vida como maquetadores. Concretamente, veremos cómo trabajar con el tamaño de los elementos albergados dentro de un contenedor flex. ¡Nos vemos en ella!
Todos los capítulos de este curso:
- Curso de Flexbox #1. Introducción
- Curso de Flexbox #2. Dirección
- Curso de Flexbox #3. Filas
- Curso de Flexbox #4. Alineación
- Curso de Flexbox #5. Orden
- Curso de Flexbox #6. Tamaño
- Curso de Flexbox #7. Factor de crecimiento
- Curso de Flexbox #8. Factor de decrecimiento
- Curso de Flexbox #9. Alineación particular
- Curso de Flexbox #10. Layout con Flexbox