Diseño Web

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.

Conviértete en Frontend Developer
Domina las tecnologías más demandadas. Accede a cursos, talleres y laboratorios prácticos de JavaScript, React, Angular, HTML, CSS y más.
Comenzar gratis ahora

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.

Mejora la colaboración entre tus equipos de diseño y desarrollo
Cursos, talleres y laboratorios de JavaScript, React, Angular, UX, HTML y CSS para todos los niveles. Incrementa la productividad de tus proyectos en un 45%
Solicitar más información


Compartir este post

También te puede interesar...

Tecnología

Glosario de IA: Conceptos avanzados

31 Agosto 2023 Diego Oliva
Tecnología

Impacto del Big Data en la gestión de riesgos en el sector financiero

26 Septiembre 2023 Sandra Domínguez
Tecnología

Introducción a Data Science: Conceptos fundamentales y aplicaciones prácticas

30 Agosto 2023 Candela García 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.