AWC | Clase 4: Flexbox y Grid

Flexbox

Flexbox es un método de CSS para controlar el modelo de caja de los elementos. Funciona sobre la propiedad display con valor flex.

Cuando a un contenedor principal le asignamos el valor flex a su display, automáticamente los elementos que pertenecen a dicho contenedor son flexibles.

Al asignar la propiead display:flex; las siguientes propiedades tienen los siguientes valores:

• flex-direction: row;
• justify-content: flex-start;
• align-items: stretch;
• gap: 0;

La propiedad flex-direction controla la dirección del eje principal del contenedor. Puede ser row o column.

La propiedad justify-content controla la alineación de los elementos sobre el eje principal.

La propiedad align-items controla la alineación de los elementos sobre el eje secundario.

La propiedad gap nos permite agregar distancia entre los elementos dentro del contenedor.

Grid

El sistema grid en CSS nos permite crear grillas a través de propiedades que controlan las filas y columnas dentro de un contenedor.

Cuando queremos utilizar grid como método dentro de un contenedor, lo que debemos hacer es asignarle a su display el valor de grid

Cuando colocamos display: grid;, obtenemos lo siguiente:

• Propiedades de la estructura:
• grid-template-columns: auto;
• grid-template-rows: auto;

• Propiedades de las celdas
• justify-content:normal(start);
• justify-items:legacy(start);
• align-content:normal(start);
• align-items:normal(start);

Tipografía adaptable

clamp() es una función de CSS que permite definir un valor que se mantiene entre un mínimo y un máximo, ajustándose automáticamente según el espacio disponible.

Su sintaxis es:
clamp(minimo, valor-preferido, maximo)

Por ejemplo:
font-size: clamp(1rem, 4vw, 2rem);

• Nunca será menor a 1rem
• Intenta siempre ser el 4vw o 4% del ancho de la ventana
• Nunca superará los 2rem