2

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.

introducir la descripción de la imagen aquí

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.

1 respuesta 1

2

Si prestas atención, cuando los estilos deberían aplicarse ocurre un error.

Error

Resulta que la sintaxis de la expresión calc está mal. Es importante que haya un espacio a cada lado del operador -. De hecho, en la documentación lo dice:

The + and - operators must be surrounded by whitespace

Los operadores + y - deben estar rodeados por espacio. No es necesario para * y /, pero aconseja hacerlo por consistencia.

Por cierto, el gap se aplica entre elementos. Por lo tanto, es probable que quieras restar solo la mitad.

Para centrar los elementos horizontalmente, deberías usar justify-content ya que el eje principal es horizontal. align-items los acomoda respecto al eje perpendicular, que en este caso es el vertical.

Queda así:

.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% - 10px);
  }
  
  .container{
    justify-content: center;
  }
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

1
  • Mateo, gracias por la ayuda :) , enserio no sabia que era por tema de espacio jeje. Queria aprovechar para consultarte por el tema del centrado, acabo de colocar "align-items: center;" , tu crees que me puedas ayudar ahí? Por lo general esa propiedad debería de funcionar pero desconozco por qué no esta funcionando. Commented el 15 jun. 2023 a las 21:36

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.