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;
}