Utmaning: Skapa en Butikskortlayout med Flexbox

Utforska kraften i flexbox genom att skapa ett butikskort med en produktbild, en beskrivning och priset. Som standard staplas alla element i en kolumn, ett under det andra. Vårt mål är dock att ändra detta beteende med hjälp av flexbox.

Betrakta följande HTML-struktur:

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

Uppgiften är att ändra CSS för att uppnå följande:

• Identifiera föräldraelementet som innehåller både produktbilden (img-taggen med klassen product-image) och produktinformationen (div-taggen med klassen product-info).
• Använd flexbox på det identifierade föräldraelementet (den div-tagg som har klassen shopping-card).
• Centrera objekten vertikalt i shoppingkortet.

• Använd display: flex; på föräldraelementet med klassen shopping-card.
• Standardvärdet för flexriktning är rad, så det är inte nödvändigt att ändra värdet på egenskapen flex-direction.
• För att centrera objekt vertikalt, använd align-items: center;.