Ejercicio CCS 10

📱 Ejercicio 10: Diseño responsivo básico con media queries

📌 Planteamiento:

Crea un diseño con tres cajas dentro de un contenedor que:

• ✅ En pantallas grandes (escritorio) estén alineadas horizontalmente lado a lado con espacio entre ellas.
• ✅ En pantallas pequeñas (menos de 600px de ancho) se apilen verticalmente.
• ✅ Usa flexbox para la estructura base y @media queries para el comportamiento responsivo.
• ✅ Aplica estilos de colores y bordes redondeados para distinguir las cajas.

👉 Escribe el HTML y el CSS necesario para este comportamiento.

✅ Modelo de solución:

<div class="container">
  <div class="row">
    <div class="box">Caja 1</div>
    <div class="box">Caja 2</div>
    <div class="box">Caja 3</div>
  </div>
</div>

<style>
.container {
  max-width: 960px;
  margin: 0 auto;
  background-color: #e3f2fd;
  padding: 20px;
  border-radius: 8px;
}
.row {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}
.row .box {
  flex: 1;
  background-color: #90caf9;
  padding: 20px;
  margin: 10px 0;
  border-radius: 5px;
  color: #0d47a1;
  font-weight: bold;
  text-align: center;
}
/* Diseño responsivo: apilar verticalmente en pantallas pequeñas */
@media (max-width: 600px) {
  .row {
    flex-direction: column;
  }
}
</style>
    

🎯 Claves de este ejercicio:

• 📍 Uso de Flexbox para la distribución horizontal.
• 📍 Uso de media queries para cambiar el diseño en pantallas pequeñas.
• 📍 Aplicar estilos visuales para mejorar la comprensión.