Generador de CSS Flexbox

Propiedades del contenedor

Propiedades del ítem

El truco de flex: 1

flex: 1 es una abreviatura para flex: 1 1 0%. Hace que un ítem:

• Crezca para llenar el espacio disponible (crecer: 1)
• Se reduzca si es necesario (reducir: 1)
• Comience desde un tamaño cero (base: 0%)

Para columnas de igual ancho, flex: 1 en cada ítem da una división perfecta. Para barras laterales que no deben reducirse por debajo del contenido, usa flex: 0 0 240px (sin crecer, sin reducir, base de 240px).

Patrones comunes

Héroe centrado

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Navbar con logo a la izquierda, enlaces a la derecha

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  margin-left: auto;  /* empujar a la derecha */
  display: flex;
  gap: 1rem;
}

Fila de tarjetas responsiva

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 260px;  /* crecer/reducir, 260px mínimo antes de envolver */
}

Campo de formulario con botón (input flexible, botón fijo)

.field {
  display: flex;
  gap: 0.5rem;
}
.field input {
  flex: 1;
}
.field button {
  flex: 0 0 auto;
}

Flexbox vs. Grid

• Flexbox: una dimensión (fila O columna). Mejor cuando los tamaños de los ítems son impulsados por el contenido o cuando distribuyes espacio a lo largo de una sola línea.
• Grid: dos dimensiones (filas Y columnas con pistas explícitas). Mejor cuando el diseño tiene estructura de filas y columnas simultáneamente.

Para una barra de navegación o una pila de tarjetas: Flexbox. Para una cuadrícula de tarjetas de producto con múltiples filas de tarjetas alineadas: CSS Grid. Muchas páginas reales usan ambos: un diseño de página Grid con Flexbox dentro de los componentes.

Problemas comunes

• Ítems que no llenan el contenedor: el align-items: stretch por defecto se aplica solo si los ítems no tienen altura fija. Con altura explícita, permanecen en ese tamaño.
• gap no funciona: verifica la compatibilidad del navegador. El gap de flex llegó tarde; Safari <14.1 no lo soportaba. Ahora es universal en 2024+.
• Hijos de flex en columna colapsando: una columna flex tiene align-items: stretch como predeterminado, lo que estira los ítems al ancho del contenedor. Si un hijo establece un ancho, se sale.
• order es solo visual: los lectores de pantalla y la navegación por teclado siguen el orden del DOM. No uses order para hacer que el contenido tenga sentido; úsalo solo para pulido visual.