Ventajas de implementar Flexbox en una maqueta web

A la hora de desarrollar una maqueta web, es de gran ayuda utilizar el modelo Flexbox. Te explicamos cómo poder implementar Flexbox en tus plantillas y sus características principales.

Publicado el 29 de Enero de 2020
Compartir

Flexbox es un nuevo modelo de layout que permite que los elementos una página se comporten de forma flexible en todos los diferentes tamaños de pantalla.

Para poder trabajar con Flexbox hay que conocer muy bien su estructura, que está constituida por un contenedor padre o contenedor Flex, y sus hijos o elementos flexibles, y es sobre el padre sobre el cual se aplica la mayor parte de las propiedades.

Algunas de las propiedades de Flexbox

Algunas de las propiedades del contenedor padre son:

  • Flex-direction: da la orientación a los elementos hijo.

  • Flex-wrap: se encarga de que los elementos hijo puedan saltar de línea.

  • Justify-content: justifica a esos alimentos hijo.

  • Align-items: alinea los elementos hijo.

Algunas de las propiedades que se pueden aplicar a los elementos flexibles o hijos son:

  • Order: permite cambiar el orden de los elementos, de tal forma que podemos cambiar su orden en la vista o parte CSS, pero en el HTML siguen teniendo el mismo orden.

  • Align-self: permite alterar la alineación de un elemento concreto, aunque anteriormente le hubiésemos dado otra alineación dentro del contenedor padre.


Compartir este post

También te puede interesar...

Tecnología

Empezando a hacer queries con Django

10 Marzo 2023 Juan Benito Pacheco Rubio
Tecnología

Cómo y por qué aprender Python y Django

22 Marzo 2023 Diego Caceres Solis
Tecnología

Por qué aprender a programar en Rust

01 Marzo 2023 Pablo Fernández

Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información.