0

Hola estoy haciendo un buscador de articulos el cual al buscar los articulos los muestra de esta forma en un contenedor flexbox con justify-content: space-around:

Contenedor flexbox 3x3

Mi pregunta es, ¿Como puedo hacer que esos ultimos 2 cards se muestren como si hubiera un 3ero en la fila (utilizando flexbox)?. Que queden de esta manera me refiero:

COntenedor flexbox 3x3

Mi codigo del contenedor es el siguiente:

            display: flex;
            flex-direction: row;
            justify-content: space-around;
            flex-wrap: wrap;
2
  • porque no agregas mejor código para que así podamos ver que es lo que tienes? tanto del contenedor como de los hijos
    – Pipe
    Commented el 22 feb. 2022 a las 21:14
  • agregar html y css Commented el 22 feb. 2022 a las 21:28

2 respuestas 2

1

Pudes simplemente ponerlos a flotar a la izquierda

tabien esta la sencilla en tu parent

.parent{
  
  width:400px;
  display: flex;
            flex-direction: row;
            justify-content: space-around;
            flex-wrap: wrap;
  
}

.parent>div{
background-color:red;
  width:100px;
  height:100px;
   float:left;
  margin:2px
}
.parent{
  width:400px;
  
}
<div class="parent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  
</div>

0

Aun es más simple con flexbox

Justify-content: flex-start

Ya que estás usando flexbox usa la propiedad adecuada para ello, en este caso flex-start

Te dejo de paso una url que me ha servido de consulta de flexbox durante mucho tiempo, viene bien tenerla al lado

.parent{
  width:400px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.parent>div{
  background-color:red;
  width:100px;
  height:100px;
  margin:2px
}
<div class="parent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.