¿Por qué los artículos flexibles no se envuelven?

Estoy intentando hacer varias filas de cuadrados (3 por línea) que tengan la misma altura.

He escrito algo de HTML y CSS para esto, pero todas las cajas van en la misma línea.

Esto es lo que tengo hasta ahora:

#list-wrapper { display: flex; width: 100%; } #list-wrapper div { width: 33.33%; } #list-wrapper div img { flex: 1; } 
 
image one
image two
image one
image two
image one
image two

Cuando cargo la página con esto aparecen todos los cuadros, pero están todos en una línea yendo sobre el ancho del 100% de los padres.

Cualquier ayuda es muy apreciada.

Una configuración inicial de un contenedor flex-wrap: nowrap es flex-wrap: nowrap .

Esto significa que cuando crea un contenedor flexible (al aplicar display: flex o display: inline-flex a un elemento) todos los elementos secundarios (“elementos flexibles”) se limitan a una sola línea.

Para habilitar los elementos flexibles para envolver use flex-wrap: wrap .


Aquí hay algunos ejemplos de cómo funcionan las propiedades de flex:

Un contenedor flexible simple con varios elementos flexibles que contienen una imagen:

 #list-wrapper { display: flex; border: 1px solid black; } #list-wrapper div {} #list-wrapper div img { height: 150px; width: 150px; } 
 

Si está utilizando flexbox y desea que el contenido se envuelva, debe especificar flex-wrap: wrap . Por defecto, los elementos flexibles no se envuelven.

Su código aquí no está haciendo nada porque el padre de #list-wrapper div img no se display: flex . Debes mover esto a #list-wrapper div :

 #list-wrapper div img { -webkit-flex: 1; -ms-flex: 1; flex: 1; } 

Para que las imágenes tengan tres flex-basis: 33.33333% , debe especificar flex-basis: 33.33333% .

Cambia tu CSS a esto y funcionará:

 #list-wrapper { display: -ms-flexbox; display: -webkit-flex; display: flex; width: 100%; flex-wrap: wrap; } #list-wrapper div { flex: 0 0 33.333%; } 

JS Fiddle: https://jsfiddle.net/f47prnnt/1/