Notas de lectura

CSS: Flexbox, como y cuando utilizar (CSS Medio)

0 veces vendidas

Grado
Desarrollo de Aplicaciones Web

Institución
Desarrollo De Aplicaciones Web

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.

[Mostrar más]

Vista previa 1 fuera de 1 páginas

Ver ejemplo

Subido en 17 de marzo de 2024
Número de páginas 1
Escrito en 2023/2024
Tipo Notas de lectura
Profesor(es) Edgar cáceres
Contiene Todas las clases

5,41 €

Añadir al carrito

Añadir a la lista de deseos

100% de satisfacción garantizada
Inmediatamente disponible después del pago
Tanto en línea como en PDF
No estas atado a nada

FLEXBOX EN CSS

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,41 €. You're not tied to anything after your purchase.

Can Stuvia be trusted?

4.6 stars on Google & Trustpilot (+1000 reviews)

45,681 summaries were sold in the last 30 days

Founded in 2010, the go-to place to buy summaries for 15 years now

Empieza a vender