CSS

Generador de patrones con Flexbox

Crea patrones fluidos con filas y columnas flexibles para bloques decorativos, listados visuales y sistemas de tarjetas.

¿Cuánto sabes de CSS?

📘 Teoría

Qué hace útil a un generador Flex

Controla composición visual sin complejidad innecesaria.

El patrón nace de la combinación de display: flex, flex-wrap y una regla consistente de tamaños mínimos.

Si añades variación de grow o basis por índice, puedes crear ritmos visuales con muy poco CSS.

La clave es exportar un resultado estable y legible para integrarlo en componentes reales.

Controles esenciales: direction, wrap, gap, basis y ratio de crecimiento.
Patrones recomendados: bloques equilibrados, bloques destacados y cintas de etiquetas.
Mantén un tamaño mínimo para evitar colapsos en pantallas pequeñas.

Base CSS de patrón flexible

Con pocas reglas puedes generar composiciones reutilizables.

Patrón de tiles con Flexbox

.pattern {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pattern > i {
  flex: 1 1 72px;
  min-height: 56px;
  border-radius: 10px;
  background: rgba(14, 165, 233, .26);
}
.pattern > i:nth-child(4n) {
  flex-grow: 2;
}