Diseño con Flexbox parte 2

1. Alineación de Elementos Individuales (self-start, self-center, self-end, self-stretch, self-auto) #

Modifica la alineación de un elemento individual en el eje vertical.

7. Flex Wrap (flex-wrap, flex-nowrap, flex-wrap-reverse) #

Por defecto, Flexbox organiza los elementos en una sola fila o columna, pero con flex-wrap, puedes hacer que los elementos ocupen varias filas si el espacio es limitado.

• flex-wrap: permite que los elementos se ajusten a múltiples filas cuando sea necesario.

En este ejemplo, los elementos se ajustarán automáticamente en varias filas cuando el espacio no sea suficiente, gracias a flex-wrap.

• flex-nowrap: evita que los elementos se ajusten, forzándolos a permanecer en una sola línea.

• flex-wrap-reverse: envuelve los elementos en múltiples filas, pero en orden inverso.

Ejemplo: #

2. Flex Basis (basis-[size]) #

flex-basis determina el tamaño inicial de un elemento antes de que Flexbox lo ajuste. En Tailwind, puedes usar basis-[size] para establecer la base de cada elemento.

• basis-1/2: ocupa la mitad del ancho del contenedor.

Aquí, cada elemento ocupa un tercio del ancho del contenedor gracias a basis-1/3.

• basis-full: ocupa el ancho completo del contenedor.

En este caso el primer elemento ocupa un tercio y el segundo ocupa el resto del contenedor.

• basis-1/3, basis-1/4: ocupan proporciones específicas.

En este ejemplo, el primer elemento ocupa un tercio, el segundo un cuarto y el tercero solamente lo que necesite ocupar.

9. Responsividad con Flexbox #

Una de las grandes ventajas de Tailwind es su capacidad para manejar Flexbox en diseños responsivos. Puedes aplicar diferentes configuraciones de Flexbox según el tamaño de la pantalla.

Ejemplo: #

En este ejemplo, los elementos se apilan en una columna en pantallas pequeñas (flex-col), pero se organizan en una fila en pantallas medianas o más grandes (md:flex-row).

3. Espaciado entre Elementos (gap) #

Con la clase gap, puedes agregar espacio entre elementos en un contenedor flex. Esto es útil para crear un diseño limpio y ordenado sin la necesidad de agregar márgenes a cada elemento individualmente.

• gap-4: espacio entre elementos de 1 rem.
• gap-x-4: espacio horizontal.
• gap-y-4: espacio vertical.

Ejemplo: #

En este ejemplo, gap-4 añade espacio uniforme entre cada elemento en ambas direcciones.

11. Ejemplo Práctico: Crear una Galería Responsiva #

Ahora combinaremos los conceptos anteriores para crear una galería de tarjetas (cards) que se ajusta automáticamente a diferentes tamaños de pantalla.

Explicación #

1. flex-wrap: permite que las tarjetas se ajusten en varias filas.
2. basis-full: las tarjetas ocupan el ancho completo en pantallas pequeñas.
3. sm:basis-1/2: en pantallas medianas, cada tarjeta ocupa la mitad del ancho.
4. lg:basis-1/3: en pantallas grandes, cada tarjeta ocupa un tercio del ancho.
5. gap-4: añade espacio uniforme entre las tarjetas.

Con esto, tienes una galería que se adapta a diferentes tamaños de pantalla automáticamente.