Programación: Flexbox y Grid

EMPEZAR >

<Programación

Flexbox - Grid>

<¿Por qué Flexbox y Grid?>

Para crear cómodamente diseños responsivos

Para alinear y organizar elementos de una interfaz

Para evitar métodos antiguos como "float" o "inline-block"

>

>

EMPEZAR >

<01> FLEXBOX

// Usos de Flexbox

- Para distribuir elementos en una sola dirección (horizontal o vertical). - Para alineaciones dinámicas sin necesidad de valores fijos. - Para componentes pequeños como menús de navegación, botones o tarjetas.

>

>

El Flexbox debe usarse en el documento de CSS, y debe aplicarse a un contenedor con la etiqueta "display".

>

>

// ¿Cómo se usa?

// Sus propiedades

>

flex-direction

align-contents

align-items

Otras propiedades

justify-content

>

<02> GRID

EMPEZAR >

// Usos de grid

- Para layouts completos, ya que ordena el contenido en filas y columnas. - Para tener un control preciso de cada elemento. - Para diseños complejos.

>

>

El Grid debe usarse en el documento de CSS, y debe aplicarse a un contenedor con la etiqueta "display". Luego, se definen las columnas y filas usando "grid-template-columns" y " grid-template-rows".

>

>

// ¿Cómo se usa?

// Sus propiedades

>

grid-template

grid-auto

gap

Otras propiedades

grid-auto-flow

>

</¡Gracias!>

• Flex-wrap: permite que los elementos se distribuyan en múltiples líneas si no caben en el contenedor.
• Flex-grow: determina el espacio extra que puede usar un elemento frente a los demás.
• Flex-shrink: determina cuánto se encoge un elemento cuando no hay suficiente espacio.
• Flex-basis: define el tamaño base de un elemento antes de usar flex-grow o shrink.

Otras propiedades

• Start: alinea las filas arriba del contenedor.
• End: alinea las filas abajo del contenedor.
• Center: centra las filas verticalmente.
• Stretch: las filas se expanden para ocupar todo el espacio disponible.
• Space-between: distribuye el espacio entre las filas, sin márgenes.
• Space-around: deja espacios iguales arriba y abajo de cada fila.
• Space-evenly: distribuye el espacio de manera totalmente uniforme.

Align-content

Se usa cuando se necesitan organizar múltiples líneas de elementos flexibles.

• Stretch: los estira para llenar el contenedor.
• Flex-start: los alinea al inicio.
• Flex-end: los alinea al final.
• Center: los centra verticalmente.
• Baseline: los alinea según la línea base del texto.

Align-items

Se encarga de alinear los elementos en la dirección opuesta a flex-direction.

• Flex-start (por defecto): alinea los elementos al inicio.
• Flex-end: los alinea al final.
• Center: los centra.
• Space-between: distribuye el espacio entre los elementos.
• Space-around: deja espacio alrededor de cada elemento.
• Space-evenly: distribuye el espacio de manera equitativa.

Justify-content

Es el que controla la dirección de los elementos dentro de la dirección principal.

• Row: de izquierda a derecha.
• Row-reverse: de derecha a izquierda.
• Column: de arriba hacia abajo.
• Column-reverse: de abajo hacia arriba.

Flex-direction

Sirve para definir la dirección principal de los elementos del contenedor.

Gap

Controla el espacio entre filas y columnas. Podemos especificar las filas y columnas por separado con "column-gap" y "row-gap".

• % o px: tamaño fijo de la columna o fila.
• Fr: distribuye espacio proporcionalmente.
• Auto: adapta el tamaño según el contenido.
• Repeat: crea columnas o filas repetitivas.
• Minmax: define tamaños mínimos y máximos.

Grid-template

Sirve para definir las columnas (grid-template-columns) o las filas (grid-template-rows).

Grid-auto-flow

Controla si los nuevos elementos se agregan por filas o por columnas.

Grid-auto

Grid-auto-rows o grid-auto-columns sirven para definir el tamaño de filas o columnas que no se definieron explícitamente.

• Align-content: alinea la cuadrícula dentro del contenedor si hay espacio libre en el eje vertical. Valores: start, end, center, stretch, space-between, space-around, space-evenly.
• Justify-content: alinea la cuadrícula dentro del contenedor si hay espacio libre en el eje horizontal. Valores: start, end, center, stretch, space-between, space-around, space-evenly.

• Place-content: alinea la cuadrícula dentro del contenedor si hay espacio libre en ambos ejes.

Otras propiedades