Quiero lograr que 3 items tengan el mismo tamaño, al inicio pueden ver que los items ocupan el mismo tamaño, pero cuando la pantalla mida 768px quiero que cada item mida el 50% de su padre, a la vez tambien quiero que se pueda centrar.
Les voy a dejar una imagen para que vean el resultado al que quiero llegar.
He estado intentado realizar este ejercicio con el código que les estoy proporcionando aquí abajo 👇
.container{
display:flex;
gap: 20px;
flex-wrap: wrap;
}
.item{
flex: 1 1 0;
}
.item:nth-child(1){
background: red;
}
.item:nth-child(2){
background: yellow;
}
.item:nth-child(3){
background: green;
}
@media screen and (max-width: 768px) {
.item{
/*le resto 20px por el gap*/
flex:0 0 calc(50%-20px);
}
.container{
align-items: center;
}
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
He usado la propiedad "flex" colocando como valor el 50% para que todos los items, incluyendo el tercero que pasará a la siguiente fila, midan el 50% y además quiero centrar el tercer item, pero no tuve éxito.