flex-wrap: una línea, o todas las que hagan falta
Por defecto, un contenedor flex mantiene todos sus elementos en una línea (flex-wrap: nowrap) y los encoge para que quepan. flex-wrap: wrap les permite conservar su tamaño y pasar a la línea siguiente:
Cada elemento pide 100px, cinco de ellos en una caja de 340px. Cinco elementos y cuatro gaps de 8px necesitan 532px, así que sin salto de línea cada elemento se aprieta a unos 62px, porque los elementos flex se encogen por defecto. Con wrap se quedan en 100px: tres caben en la primera línea y los otros dos pasan a una segunda.
Valores de flex-wrap
| Valor | Qué pasa |
|---|---|
nowrap (por defecto) | Una línea. Los elementos se encogen, y se salen del contenedor cuando ya no pueden encogerse más |
wrap | Los elementos que no caben empiezan una nueva línea debajo |
wrap-reverse | Lo mismo, pero las líneas nuevas se apilan hacia arriba: la primera línea queda abajo |
Mira cómo saltan de línea
Arrastra el control deslizante para cambiar el ancho del contenedor. El indicador cuenta las líneas y dice cuántos elementos hay en cada una:
A 400px, cuatro elementos de 90px y tres gaps de 8px (384px) caben en una línea, así que obtienes 4 + 2. Arrastra hacia 620px y los seis caben en una línea; arrastra hacia 120px y cada elemento tiene una línea para él solo.
flex-direction: fila o columna
flex-direction define la dirección en la que fluyen los elementos, que es el eje principal:
| Valor | Los elementos van | Primer elemento |
|---|---|---|
row (por defecto) | uno al lado del otro, en la dirección de escritura | al inicio de la línea |
row-reverse | uno al lado del otro, invertidos | al final de la línea |
column | apilados, de arriba abajo | arriba |
column-reverse | apilados, de abajo arriba | abajo |
En las dos cajas row, los elementos se estiran a toda la altura de la caja, porque align-items: stretch trabaja a lo ancho de la fila. En las cajas column se estiran a todo el ancho, por la misma razón. Los ejes giraron, y todas las propiedades de alineación giraron con ellos (la página de justify-content lo muestra en detalle).
flex-flow: las dos en una línea
flex-flow es la abreviatura de flex-direction seguida de flex-wrap:
.cards { flex-flow: row wrap; } /* flex-direction: row; flex-wrap: wrap; */
.stack { flex-flow: column nowrap; } /* flex-direction: column; flex-wrap: nowrap; */
Tarjetas responsive con wrap y sin media queries
Dale a cada elemento un tamaño inicial con flex: 1 1 180px y deja que la fila salte de línea. Cada elemento crece hasta llenar su línea, y cuando en una línea no cabe otro elemento de 180px, el siguiente pasa abajo:
En una vista previa de unos 800px de ancho, tres tarjetas caben en la primera línea (unos 253px cada una) y las dos últimas comparten la segunda línea, donde cada una crece hasta unos 386px. Así funciona flexbox: cada línea reparte su propio espacio, así que las tarjetas de una última línea corta terminan más anchas que las de arriba. Si quieres que la última tarjeta tenga el mismo ancho que las demás, usa grid con repeat(auto-fill, minmax(180px, 1fr)) (consulta la página de grid).
align-content: espaciar las líneas
Cuando un contenedor salta de línea y es más alto que sus líneas, align-content decide dónde van las líneas. Acepta los mismos valores que justify-content, más stretch:
En la primera caja las dos líneas quedan arriba. En la segunda, la primera línea queda arriba y la segunda abajo, con toda la altura sobrante entre ellas.
Orden invertido y accesibilidad
row-reverse, column-reverse y wrap-reverse solo cambian dónde se dibujan los elementos. Los lectores de pantalla y la tecla Tab siguen el orden del HTML, así que un usuario de teclado recorre los elementos en la dirección contraria a la que ve. Invierte solo por efecto visual; cuando el orden tiene significado, cámbialo en el HTML.
Errores comunes
- Elementos que se encogen en lugar de saltar de línea. Los elementos con
flex: 1parten de unflex-basisde 0 y se aprietan en una línea. Dales una base real, comoflex: 1 1 200px. - Poner
flex-wrapen los elementos. Va en el contenedor flex. - Usar
align-itemspara espaciar las líneas. Eso alinea los elementos dentro de cada línea; las líneas en sí se mueven conalign-content. - Un último elemento solitario estirado por toda la fila. Es
flex-growen una línea con un solo elemento. Usa grid si todas las tarjetas deben tener el mismo ancho. - Esperar que
flex-direction: columnllene una altura. Un contenedor en columna solo es tan alto como su contenido salvo que le des unheight, así quejustify-contentno tiene espacio para trabajar.
Preguntas frecuentes
¿Qué hace flex-wrap: wrap?
Permite que los elementos flex pasen a una nueva línea cuando no caben en una fila. Con el nowrap por defecto, los elementos se quedan en una línea y se encogen, o se salen del contenedor si ya no pueden encogerse más.
¿Por qué no funciona flex-wrap?
El salto de línea solo ocurre cuando los tamaños iniciales de los elementos suman más que el contenedor. Los elementos con flex: 1 parten de un flex-basis de 0, así que nunca saltan de línea; dales un tamaño inicial real (flex: 1 1 200px o width: 200px). Comprueba también que flex-wrap esté en el contenedor flex y no en los elementos.
¿Qué diferencia hay entre flex-direction row y column?
row (el valor por defecto) coloca los elementos uno al lado del otro en la dirección de escritura, y column los apila de arriba abajo. El eje principal gira con ella, así que en una columna justify-content trabaja en vertical y align-items en horizontal.
¿Qué es flex-flow?
Una abreviatura de flex-direction y flex-wrap en una sola declaración: flex-flow: row wrap; es lo mismo que flex-direction: row; flex-wrap: wrap;.
¿Qué diferencia hay entre align-items y align-content?
align-items coloca los elementos dentro de su línea. align-content coloca las líneas en sí dentro del contenedor, así que solo importa cuando el contenedor tiene flex-wrap: wrap y es más alto que sus líneas.
