Exploremos el poder de flexbox creando una tarjeta de tienda con una imagen de producto, una breve descripción y el precio. Por defecto, todos los elementos se apilan en una columna, uno debajo del otro. Sin embargo, nuestro objetivo es cambiar este comportamiento utilizando flexbox.

Tarea

Considera la siguiente estructura HTML:

<div class="shopping-card">
  <img src="link-to-image" alt="Analytics Machine" class="product-image" />
  <div class="product-info">
    <h3 class="product-title">Analytics Machine</h3>
    <p class="product-description">Bio Innovation</p>
    <div class="product-price">$10.00</div>
    <button class="add-to-cart">Add to Cart</button>
  </div>
</div>

La tarea consiste en modificar el CSS para lograr lo siguiente:

• Identificar el elemento padre que contiene tanto la imagen del producto (etiqueta img con la clase product-image) como la información del producto (etiqueta div con la clase product-info).
• Aplicar flexbox al elemento padre identificado (la etiqueta div con la clase shopping-card).
• Centrar verticalmente los elementos dentro de la tarjeta de compra.

• Aplicar display: flex; al elemento padre con la clase shopping-card.
• La dirección de flexión predeterminada es fila, por lo que no es necesario cambiar el valor de la propiedad flex-direction.
• Para centrar los elementos verticalmente, utilizar align-items: center;.