0

introducir la descripción de la imagen aquí actualmente tengo un flexbox que contiene estas tarjetitas por asi decir y quiero que ademas de tener la propiedad strech para que pueden haber mas de una por linea tambien quiero que se queden centradas y que asi no se vea feo, pero no consigo hacerlo, ¿alguien sabe la solucion? actualmente tengo esto:

.cards{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    flex-grow: 4;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

.cards .card{
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 25px;
    transition: 0.3s;
    align-self: center;
}

/*Ik this code is probably weird*/
<div class="cards">
      <div class="card"> this is my 1st card</div>
      <div class="card"> this is A card</div>
      <div class="card"> lorem ipsum dolor sit amet</div>
      <div class="card"> this is my 4th card</div>
</div>

html y css(ya esta en el snippet):

<div class="cards">
      <div class="card"> this is my 1st card</div>
      <div class="card"> this is A card</div>
      <div class="card"> lorem ipsum dolor sit amet</div>
      <div class="card"> this is my 4th card</div>
</div>

.cards{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    flex-grow: 4;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

.cards .card{
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 25px;
    transition: 0.3s;
    align-self: center;
}

1 respuesta 1

0

Para centrarlo, te falta la propiedad justify-content, que define cómo se distribuye el espacio en el eje principal definido por flex-direction (horizontal para row y row-reverse, vertical para column y column-reverse).

Dependiendo de la forma en la que quieras que se distribuya, añade a la clase del contenedor (.cards) el atributo con alguno de los valores de los que dispone. Para lo que quieres hacer, el valor space-around seguramente sea el más apropiado, pero también podrías probar con space-between o center.

Tienes más información aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

.cards {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    flex-grow: 4;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

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.