Lad os udforske flexbox'ens muligheder ved at oprette et shopkort med et produktbillede, en beskrivelse og prisen. Som standard er alle elementerne stablet i en kolonne, oven på hinanden. Vores mål er dog at ændre denne opførsel ved hjælp af flexbox.

Overvej 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>
```
Opgaven er at ændre CSS for at opnå følgende:
- Identificer det overordnede element, der indeholder både produktbilledet (`img`-tag med klassen `product-image`) og produktinformationen (`div`-tag med klassen `product-info`).
- Anvend flexbox på det identificerede overordnede element (det `div`-tag med klassen `shopping-card`).
- Centrer elementerne lodret i shopkortet.

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

LnNob3BwaW5nLWNhcmQgewogIC8qIENoYW5nZSBjb2RlIGJlbG93IHRoaXMgbGluZSAqLwogIGRpc3BsYXk6IF9fXzsKICBfX186IF9fXzsKICAvKiBDaGFuZ2UgY29kZSBhYm92ZSB0aGlzIGxpbmUgKi8KICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIG1heC13aWR0aDogZml0LWNvbnRlbnQ7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi5wcm9kdWN0LWltYWdlIHsKICB3aWR0aDogMTAwcHg7CiAgaGVpZ2h0OiAxMDBweDsKICBtYXJnaW4tcmlnaHQ6IDMwcHg7Cn0KCi5wcm9kdWN0LXRpdGxlIHsKICBmb250LXNpemU6IDEuNXJlbTsKICBtYXJnaW46IDAgMCAxMHB4IDA7Cn0KCi5wcm9kdWN0LWRlc2NyaXB0aW9uIHsKICBtYXJnaW46IDAgMCAxMHB4IDA7Cn0KCi5wcm9kdWN0LXByaWNlIHsKICBmb250LXdlaWdodDogYm9sZDsKICBmb250LXNpemU6IDEuMjVyZW07CiAgbWFyZ2luOiAwIDAgMTBweCAwOwp9CgouYWRkLXRvLWNhcnQgewogIGJhY2tncm91bmQtY29sb3I6ICMwMDdiZmY7CiAgY29sb3I6ICNmZmY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgY3Vyc29yOiBwb2ludGVyOwp9

- Anvend `display: flex;` på forældreelementet med klassen `shopping-card`.
- Standardværdien for flex-retning er række, så det er ikke nødvendigt at ændre værdien af egenskaben `flex-direction`.
- For at centrere elementer lodret, brug `align-items: center;`.

LnNob3BwaW5nLWNhcmQgewogIC8qIENoYW5nZSBjb2RlIGJlbG93IHRoaXMgbGluZSAqLwogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAvKiBDaGFuZ2UgY29kZSBhYm92ZSB0aGlzIGxpbmUgKi8KICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIG1heC13aWR0aDogZml0LWNvbnRlbnQ7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi5wcm9kdWN0LWltYWdlIHsKICB3aWR0aDogMTAwcHg7CiAgaGVpZ2h0OiAxMDBweDsKICBtYXJnaW4tcmlnaHQ6IDMwcHg7Cn0KCi5wcm9kdWN0LXRpdGxlIHsKICBmb250LXNpemU6IDEuNXJlbTsKICBtYXJnaW46IDAgMCAxMHB4IDA7Cn0KCi5wcm9kdWN0LWRlc2NyaXB0aW9uIHsKICBtYXJnaW46IDAgMCAxMHB4IDA7Cn0KCi5wcm9kdWN0LXByaWNlIHsKICBmb250LXdlaWdodDogYm9sZDsKICBmb250LXNpemU6IDEuMjVyZW07CiAgbWFyZ2luOiAwIDAgMTBweCAwOwp9CgouYWRkLXRvLWNhcnQgewogIGJhY2tncm91bmQtY29sb3I6ICMwMDdiZmY7CiAgY29sb3I6ICNmZmY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgY3Vyc29yOiBwb2ludGVyOwp9

Behersk det grundlæggende i CSS, sproget til styling, der forvandler udseendet og oplevelsen af websider. Udforsk kernekoncepter såsom tekststilarter, farver, afstand, box-modellen, Flexbox og dekorative effekter. Opbyg færdigheder til at skabe visuelt engagerende og velstrukturerede websider.

Forstå, hvordan CSS forbindes til HTML, og hvordan stilarter anvendes gennem selektorer.
Anvendelse af farver, tekstformatering og hover-effekter til at kontrollere visuel præsentation.

Forbedring af typografi ved hjælp af linjehøjde, afstand, skrifttypeegenskaber og brugerdefinerede skrifttyper. Kontrol af skrifttypefamilier, vægt, stil og størrelse for øget læsbarhed.

Styring af layoutstruktur ved hjælp af margin, padding, kanter og breddeegenskaber. Forståelse af boksstørrelsesadfærd og elementvisningstyper såsom blok, inline og inline-blok.

Styring af horisontale og vertikale layouts ved hjælp af Flexbox-egenskaber. Justering af retning, justering og afstand for at strukturere UI-komponenter.

Forbedring af layouts ved brug af baggrundsfarver, billeder, pseudo-elementer og skygger. Styling af visuelle komponenter for dybde og kontrast.

Udfordring: Opret et Butikskort-Layout med Flexbox