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:
```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>
```
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.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0ic2hvcHBpbmctY2FyZCI+CiAgICAgIDxpbWcKICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvYTVkNmVmNTAtY2JmNS00YTk1LTg5ZDQtNDc1YjcwNGNkODExL3NlY3Rpb24rNCtGbGV4Ym94L2FuYWx5dGljcyUyQm1hY2hpbmUucG5nIgogICAgICAgIGFsdD0iQW5hbHl0aWNzIE1hY2hpbmUiCiAgICAgICAgY2xhc3M9InByb2R1Y3QtaW1hZ2UiCiAgICAgIC8+CiAgICAgIDxkaXYgY2xhc3M9InByb2R1Y3QtaW5mbyI+CiAgICAgICAgPGgzIGNsYXNzPSJwcm9kdWN0LXRpdGxlIj5BbmFseXRpY3MgTWFjaGluZTwvaDM+CiAgICAgICAgPHAgY2xhc3M9InByb2R1Y3QtZGVzY3JpcHRpb24iPkJpbyBJbm5vdmF0aW9uPC9wPgogICAgICAgIDxkaXYgY2xhc3M9InByb2R1Y3QtcHJpY2UiPiQxMC4wMDwvZGl2PgogICAgICAgIDxidXR0b24gY2xhc3M9ImFkZC10by1jYXJ0Ij5BZGQgdG8gQ2FydDwvYnV0dG9uPgogICAgICA8L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

LnNob3BwaW5nLWNhcmQgewogIC8qIENoYW5nZSBjb2RlIGJlbG93IHRoaXMgbGluZSAqLwogIGRpc3BsYXk6IF9fXzsKICBfX186IF9fXzsKICAvKiBDaGFuZ2UgY29kZSBhYm92ZSB0aGlzIGxpbmUgKi8KICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIG1heC13aWR0aDogZml0LWNvbnRlbnQ7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi5wcm9kdWN0LWltYWdlIHsKICB3aWR0aDogMTAwcHg7CiAgaGVpZ2h0OiAxMDBweDsKICBtYXJnaW4tcmlnaHQ6IDMwcHg7Cn0KCi5wcm9kdWN0LXRpdGxlIHsKICBmb250LXNpemU6IDEuNXJlbTsKICBtYXJnaW46IDAgMCAxMHB4IDA7Cn0KCi5wcm9kdWN0LWRlc2NyaXB0aW9uIHsKICBtYXJnaW46IDAgMCAxMHB4IDA7Cn0KCi5wcm9kdWN0LXByaWNlIHsKICBmb250LXdlaWdodDogYm9sZDsKICBmb250LXNpemU6IDEuMjVyZW07CiAgbWFyZ2luOiAwIDAgMTBweCAwOwp9CgouYWRkLXRvLWNhcnQgewogIGJhY2tncm91bmQtY29sb3I6ICMwMDdiZmY7CiAgY29sb3I6ICNmZmY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgY3Vyc29yOiBwb2ludGVyOwp9

- 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;`.

LnNob3BwaW5nLWNhcmQgewogIC8qIENoYW5nZSBjb2RlIGJlbG93IHRoaXMgbGluZSAqLwogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAvKiBDaGFuZ2UgY29kZSBhYm92ZSB0aGlzIGxpbmUgKi8KICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIG1heC13aWR0aDogZml0LWNvbnRlbnQ7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi5wcm9kdWN0LWltYWdlIHsKICB3aWR0aDogMTAwcHg7CiAgaGVpZ2h0OiAxMDBweDsKICBtYXJnaW4tcmlnaHQ6IDMwcHg7Cn0KCi5wcm9kdWN0LXRpdGxlIHsKICBmb250LXNpemU6IDEuNXJlbTsKICBtYXJnaW46IDAgMCAxMHB4IDA7Cn0KCi5wcm9kdWN0LWRlc2NyaXB0aW9uIHsKICBtYXJnaW46IDAgMCAxMHB4IDA7Cn0KCi5wcm9kdWN0LXByaWNlIHsKICBmb250LXdlaWdodDogYm9sZDsKICBmb250LXNpemU6IDEuMjVyZW07CiAgbWFyZ2luOiAwIDAgMTBweCAwOwp9CgouYWRkLXRvLWNhcnQgewogIGJhY2tncm91bmQtY29sb3I6ICMwMDdiZmY7CiAgY29sb3I6ICNmZmY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgY3Vyc29yOiBwb2ludGVyOwp9

Lær det grunnleggende i CSS, stilsett-språket som forvandler utseendet og følelsen på nettsider. Utforsk sentrale konsepter som tekststiler, farger, mellomrom, boksmodellen, Flexbox og dekorative effekter. Bygg ferdigheter for å lage visuelt engasjerende og velstrukturerte nettsider.

Forstå hvordan CSS kobles til HTML og hvordan stiler brukes gjennom selektorer.
Bruk av farger, tekststiler og hover-effekter for å kontrollere visuell presentasjon.

Forbedre typografi ved hjelp av linjehøyde, avstand, skriftegenskaper og egendefinerte fonter. Kontroller skrifttyper, vekt, stil og størrelse for bedre lesbarhet.

Kontroll av layoutstruktur ved bruk av margin, padding, border og bredde-egenskaper. Forståelse av boksstørrelsesatferd og elementvisningstyper som block, inline og inline-block.

Kontroller horisontale og vertikale oppsett ved hjelp av Flexbox-egenskaper. Juster retning, justering og avstand for å strukturere UI-komponenter.

Forbedre oppsett ved bruk av bakgrunnsfarger, bilder, pseudo-elementer og skygger. Style visuelle komponenter for dybde og kontrast.

Utfordring: Lag et Butikkort-oppsett med Flexbox