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
    el 22 feb. 2022 a las 21:14
  • agregar html y css 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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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