Aprendemos a utilizar la propiedad flexbox para dar un estilado de nuestros bloques y lineas del sitio de una forma mas profesional utilizando todo el espacio disponible y dando responsive-design para cuando el usuario interactúe con este.
Flexbox, o el Módulo de Caja Flexible, es un modelo de diseño en CSS que permite diseñar
y organizar elementos en una página web de manera eficiente y flexible. Con Flexbox, puedes
controlar la distribución del espacio entre los ítems de una interfaz y mejorar las capacidades de
alineació. Es especialmente útil para:
• Alinear elementos horizontal y verticalmente.
• Distribuir espacio entre elementos de manera uniforme.
• Cambiar el orden de visualización de los elementos sin alterar el HTML.
• Crear diseños responsivos que se adaptan a diferentes tamaños de pantalla.
• Flexbox maneja el layout en una sola dimensión a la vez, ya sea como fila o como columna,
lo que lo diferencia del Grid Layout que es bidimensional.
En Flexbox, hay propiedades específicas que se aplican al contenedor padre (flex container)
y otras que se aplican a los elementos hijos (flex items). Aquí te detallo algunas de ellas:
Propiedades del contenedor padre:
• display: Establece el elemento como un contenedor flex. Puede ser flex o inline-flex.
• flex-direction: Define la dirección principal del eje en el contenedor, puede ser row, row-
reverse, column, o column-reverse.
• flex-wrap: Controla si los elementos hijos se deben envolver o no cuando no hay suficiente
espacio, con valores como nowrap, wrap, o wrap-reverse.
• justify-content: Alinea los elementos hijos en el eje principal y puede tomar valores como
flex-start, flex-end, center, space-between, space-around, o space-evenly.
• align-items: Alinea los elementos hijos en el eje transversal y puede ser flex-start, flex-end,
center, baseline, o stretch.
• align-content: Alinea las líneas de elementos dentro del contenedor cuando hay espacio
extra en el eje transversal. Los valores son similares a justify-content.
Propiedades de los elementos hijos:
• flex: Es una propiedad abreviada para flex-grow, flex-shrink, y flex-basis.
• flex-grow: Define la capacidad de un elemento para crecer si es necesario.
• flex-shrink: Define la capacidad de un elemento para encogerse si es necesario.
• flex-basis: Define el tamaño inicial de un elemento antes de la distribución del espacio
restante.
• align-self: Permite a un elemento hijo tener una alineación individual en el eje transversal,
que puede anular la align-items del contenedor.
• order: Permite cambiar el orden en el que aparecen los elementos hijos en el contenedor.
Estas son solo algunas de las propiedades que puedes utilizar en Flexbox para crear diseños
responsivos y flexibles
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller enriquebrizuela. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $5.49. You're not tied to anything after your purchase.
