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
Los beneficios de comprar resúmenes en Stuvia estan en línea:
Garantiza la calidad de los comentarios
Compradores de Stuvia evaluaron más de 700.000 resúmenes. Así estas seguro que compras los mejores documentos!
Compra fácil y rápido
Puedes pagar rápidamente y en una vez con iDeal, tarjeta de crédito o con tu crédito de Stuvia. Sin tener que hacerte miembro.
Enfócate en lo más importante
Tus compañeros escriben los resúmenes. Por eso tienes la seguridad que tienes un resumen actual y confiable.
Así llegas a la conclusión rapidamente!
Preguntas frecuentes
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.
100% de satisfacción garantizada: ¿Cómo funciona?
Nuestra garantía de satisfacción le asegura que siempre encontrará un documento de estudio a tu medida. Tu rellenas un formulario y nuestro equipo de atención al cliente se encarga del resto.
Who am I buying this summary 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 this summary for 5,35 €. You're not tied to anything after your purchase.
