Flexbox en CSS: cómo distribuir elementos con ejemplos

Flexbox en CSS permite distribuir elementos a lo largo de un eje principal, como una fila de tarjetas o una barra de navegación. Para activarlo, escribe display: flex en el contenedor: sus hijos directos se convierten en elementos flexibles.

.servicios {
  display: flex;
  gap: 20px;
}

En esta guía construirás una fila que se adapta al espacio disponible. El objetivo es entender cómo se reparten los tamaños y por qué a veces un elemento no encoge o no salta de línea.

Ejemplo de tarjetas responsive con Flexbox

<section class="servicios" aria-label="Servicios">
  <article class="servicio"><h2>Diseño web</h2><p>Interfaces para tu negocio.</p></article>
  <article class="servicio"><h2>Branding</h2><p>Identidad visual coherente.</p></article>
  <article class="servicio"><h2>SEO</h2><p>Optimización de contenidos.</p></article>
</section>
<style>
  .servicios { display: flex; flex-wrap: wrap; gap: 20px; }
  .servicio {
    flex: 1 1 240px;
    min-width: 0;
    padding: 24px;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #fff;
    overflow-wrap: anywhere;
  }
</style>

flex: 1 1 240px permite crecer, encoger y partir de una base de 240 píxeles. Con flex-wrap: wrap, las tarjetas pueden pasar a otra línea. La base no es una anchura mínima obligatoria: el tamaño final depende del espacio y del resto de restricciones.

Cómo funcionan los ejes de Flexbox

Con flex-direction: row, en un documento horizontal habitual el eje principal sigue la fila. Con column, sigue la columna. justify-content distribuye espacio en el eje principal y align-items alinea en el transversal.

.barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

No memorices «horizontal» y «vertical» como reglas absolutas: cambiar la dirección cambia el papel de esas propiedades. El modo de escritura también influye.

Gap, flex-grow y flex-shrink

gap establece separación entre elementos o líneas, sin añadir por sí solo espacio en los bordes exteriores. flex-grow reparte espacio sobrante y flex-shrink participa en la reducción cuando falta espacio.

Los factores de crecimiento reparten el espacio libre, no garantizan porcentajes del ancho total. Si necesitas columnas alineadas entre varias filas, una cuadrícula puede resultar más predecible.

Por qué una tarjeta se sale del contenedor

El tamaño mínimo automático puede impedir que un elemento se reduzca lo suficiente, especialmente si contiene una URL larga o contenido con ancho fijo. Prueba min-width: 0 en el hijo flexible y revisa imágenes, tablas y textos sin puntos de corte.

No ocultes el desbordamiento de toda la página como primera solución: podrías cortar contenido sin arreglar su causa.

Errores que debes evitar

• Aplicar display: flex al hijo cuando querías organizar sus hermanos.
• Esperar varias líneas sin activar flex-wrap.
• Usar order para cambiar un orden de lectura que después no coincide con el teclado.
• Fijar anchos rígidos que no dejan espacio para gap.

Preguntas frecuentes

¿Flexbox sustituye a Grid?

No. Flexbox funciona especialmente bien en una dimensión; Grid controla filas y columnas de forma conjunta. Pueden convivir.

¿Por qué align-content no cambia nada?

En Flexbox necesitas un contenedor de varias líneas y espacio transversal disponible para apreciar la distribución.

Si tu objetivo es únicamente centrar un elemento, consulta cómo centrar un div en CSS. Para seguir practicando, visita la ruta de CSS.

Referencia técnica: documentación de MDN.