Comparativa rápida de propiedades Flexbox

1. justify-content: distribución horizontal

Se aplica al contenedor flex (.d-flex en Bootstrap) y define cómo se distribuyen los ítems a lo largo del eje principal (horizontal por defecto).

.container {
  display: flex;
  justify-content: space-between; /* Cambia el valor para probar */
}

Tip de rendimiento: Usa valores de justify-content que no requieran cálculos complejos (flex-start, center) en dispositivos con recursos limitados.

2. align-items: alineación vertical (eje transversal)

Define cómo se alinean los ítems en el eje perpendicular al principal. Es ideal para alinear tarjetas, iconos y texto dentro de una fila.

.container {
  display: flex;
  align-items: baseline; /* prueba con stretch, center, flex-start */
}

Seguridad y accesibilidad: Cuando uses align-items: stretch, verifica que los elementos no pierdan la capacidad de leer contenido en dispositivos de alta densidad de píxeles.

3. flex‑grow: cómo hacen crecer los ítems

Controla la proporción de espacio libre que cada ítem puede ocupar. El valor es un número entero que representa la “parte” del espacio restante.

.item-1 { flex-grow: 1; }
.item-2 { flex-grow: 2; }
.item-3 { flex-grow: 0; } /* no crece */

Mejores prácticas: Usa flex-grow con valores bajos (1‑3) para evitar que un solo ítem domine la UI en pantallas pequeñas.

4. flex‑shrink: cómo encogen los ítems

Cuando el contenedor es más estrecho que la suma de los ítems, flex-shrink determina cuánto se reduce cada elemento.

.item-a { flex-shrink: 1; }
.item-b { flex-shrink: 3; } /* se encoge más rápido */

Truco de depuración: Añade outline: 1px solid red; a los ítems y reduce el ancho del contenedor en la herramienta de desarrollo para observar cómo se comportan los valores de shrink.

5. Combinar justify-content, align-items, flex-grow y flex-shrink

En escenarios reales, es frecuente mezclar todas estas propiedades para lograr diseños fluidos, por ejemplo, una barra de navegación con ítems que se expanden y contraen según el ancho de pantalla.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-item {
  flex-grow: 1;   /* ocupan todo el espacio disponible */
  flex-shrink: 1; /* se contraen cuando la pantalla es estrecha */
  text-align: center;
}

Compatibilidad: Flexbox está soportado en todos los navegadores modernos (Chrome > 29, Edge > 12, Firefox > 28, Safari > 9). Para IE 11 se necesita el prefijo -ms- y algunas limitaciones (no soporta gap).

6. Solución de problemas y rendimiento

• Overflow inesperado: Si un ítem con flex-grow no tiene un max-width definido, puede romper el layout en dispositivos muy anchos.
• Desalineación en Safari: Safari a veces ignora align-items: stretch cuando el ítem tiene min-height. Añade height: 100% al hijo.
• Re‑pintado excesivo: Cambiar dinámicamente flex-grow con JavaScript provoca re‑flow. Usa transform: scale() para animaciones suaves.
• Accesibilidad: Cuando uses justify-content: space-between para distribuir botones, verifica que el orden visual coincida con el orden del DOM para lectores de pantalla.