Flexbox no se envuelve y el porcentaje de ancho del niño no funciona
Estoy tratando de hacer una cuadrícula con 2 filas y 3 columnas usando flexbox.
Entonces, dentro de mi diseño, configuré un div principal como display:flex y configuré flex-wrap:wrap para obtener la segunda fila.
Entonces decidí establecer el ancho de los niños en 30 % (esperando que cada niño obtuviera el 30 % de los padres. En esta situación, mi cuadro debería aparecer con 3 elementos por fila).
¡Pero esto ahora está funcionando!
Aquí está mi código:
VIOLÍN: https://jsfiddle.net/q39zj6j2/13/
Y el CSS:
#destaquesHome {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap:wrap;
margin:0px 0 0 0px;
}
.destaquesHome-item {
width: 32%;
display: table;
margin:10px 0 0 0px;
height:100px;
border:1px solid #C8C8C8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Mostrar la mejor respuesta