Utfordring: Lag et Butikkort-oppsett med Flexbox

La oss utforske kraften i flexbox ved å lage et produktkort med et produktbilde, en beskrivelse og prisen. Som standard er alle elementene stablet i en kolonne, én under den andre. Målet vårt er imidlertid å endre denne oppførselen ved hjelp av flexbox.

Vurder følgende 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>

Oppgaven er å endre CSS-en for å oppnå følgende:

• Identifisere overordnede element som inneholder både produktbildet (img-taggen med klassen product-image) og produktinformasjonen (div-taggen med klassen product-info).
• Bruke flexbox på det identifiserte overordnede elementet (den div-taggen med klassen shopping-card).
• Sentrere elementene vertikalt i produktkortet.

• Bruk display: flex; på overordnede element med klassen shopping-card.
• Standard retning for flex er rad, så det er ikke nødvendig å endre verdien til flex-direction-egenskapen.
• For å sentrere elementene vertikalt, bruk align-items: center;.