flex-wrap

flex-wrap determina qué hace Flexbox cuando los ítems no caben en una sola línea dentro del contenedor. El comportamiento por defecto — nowrap — fuerza todos los ítems en una única línea, comprimiéndolos si es necesario. Al cambiar a wrap, los ítems que no caben fluyen a la siguiente línea, creando un layout que se adapta naturalmente al espacio disponible sin que los ítems se encojan más allá de sus dimensiones deseadas.

Esta propiedad es la que habilita los layouts tipo galería o cuadrícula con Flexbox: ítems con un ancho fijo que se redistribuyen en más o menos filas según el ancho del contenedor. También es la condición necesaria para que align-content tenga efecto — sin flex-wrap: wrap y más de una línea de ítems, align-content no hace absolutamente nada.

El valor nowrap no es siempre problemático: en barras de navegación o grupos de botones donde se quiere una fila compacta que se encoja antes de romper, es el comportamiento correcto. La elección depende de si los ítems deben mantener su tamaño o si pueden adaptarse.

Cómo funciona

En un contenedor flex con nowrap, si la suma del ancho (o alto, en column) de todos los ítems supera el tamaño del contenedor, el navegador los comprime proporcionalmente para que entren. Los ítems pueden volverse más chicos que su contenido si no hay otra restricción.

Con wrap, cuando los ítems superarían el límite del contenedor en el eje principal, los restantes se mueven a una nueva línea. Cada línea es independiente: los ítems en una línea no saben nada de las otras. El espacio libre en cada línea lo distribuye justify-content de forma independiente por línea; el espacio entre las líneas lo distribuye align-content.

Sintaxis

.contenedor {
  display: flex;
  flex-wrap: nowrap;        /* valor por defecto */
  flex-wrap: wrap;
  flex-wrap: wrap-reverse;
}

Valores

nowrap (valor por defecto)

Todos los ítems se fuerzan en una sola línea. Si no caben, se comprimen. El contenedor puede desbordarse si los ítems tienen un mínimo de ancho que no pueden cruzar (min-width).

Cuándo usarlo: barras de navegación con ítems compactos, grupos de botones que deben mantenerse en línea.

Gotcha: si los ítems tienen min-width o width fijos, pueden desbordar el contenedor en lugar de comprimirse.

wrap

Los ítems que no caben en la línea actual se mueven a la siguiente, en la dirección del eje cruzado. Las líneas adicionales se apilan de cross-start a cross-end — en row, eso significa de arriba a abajo.

Cuándo usarlo: galerías de tarjetas, cuadrículas de productos, cualquier layout donde los ítems deben mantener su tamaño y redistribuirse según el espacio disponible.

Habilita: align-content — sin wrap, align-content no tiene efecto.

wrap-reverse

Igual que wrap pero las líneas adicionales se apilan en sentido inverso del eje cruzado: la primera línea aparece abajo y las siguientes se apilan hacia arriba.

Cuándo usarlo: casos poco frecuentes donde se necesita que el contenido más nuevo aparezca en la parte superior de un contenedor que crece hacia abajo (como un chat donde los mensajes nuevos aparecen arriba).

Ejemplo realista

.galeria {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.tarjeta {
  width: 200px;
  /* con wrap, las tarjetas que no caben bajan de línea */
}

Cuándo usarlo

Notas, gotchas e interacción

• align-content solo funciona con flex-wrap: wrap y más de una línea real. Si todos los ítems caben en una línea, align-content no tiene efecto visible aunque esté declarado. El gotcha clásico: aplicar align-content: center esperando centrar los ítems, pero los ítems no se wrappean — nada cambia.
• nowrap puede desbordar el contenedor. Si los ítems tienen min-width o width fijo y no pueden comprimirse más, el contenido sale del contenedor. Solución: agregar overflow: hidden o auto al contenedor, o usar flex-wrap: wrap.
• Cada línea es independiente en justify-content. Con wrap, si la última línea tiene menos ítems, justify-content: space-between los dispersará a los extremos de esa línea — lo que puede verse desbalanceado en la última fila de una galería.
• Interacción con flex-direction. flex-wrap funciona en la dirección perpendicular al eje principal. Con column, las líneas adicionales crecen horizontalmente (en la dirección del eje cruzado).
• flex-flow es el shorthand. flex-flow: row wrap equivale a flex-direction: row + flex-wrap: wrap en una sola declaración.

Vigente / legacy

flex-wrap es parte del módulo Flexbox Level 1, ampliamente soportado. No hay forma legacy equivalente — antes de Flexbox, los layouts multicolumna con floats requerían hacks para el wrapping. No se necesitan prefijos de vendor en proyectos modernos.