Lad os oprette et blogkort. Vi skal ændre standardpositioneringen ved hjælp af flex.

Opgaven er at:
- Identificere det overordnede element, der indeholder både postbilledet (`img`-tag med klassenavnet `post-image`) og postinformation (`div`-tag med klassenavnet `post-info`).
- Anvende flex-egenskaber på det overordnede element (`div`-tag med klassenavnet `blog-card`).
- Centrere elementerne vandret i kortet.
- Sikre, at elementerne dækker hele kortets højde.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0iYmxvZy1jYXJkIj4KICAgICAgPGltZwogICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9hNWQ2ZWY1MC1jYmY1LTRhOTUtODlkNC00NzViNzA0Y2Q4MTEvc2VjdGlvbis0K0ZsZXhib3gvc3BhY2VzaGlwLnBuZyIKICAgICAgICB3aWR0aD0iMjAwcHgiCiAgICAgICAgYWx0PSJQb3N0IEltYWdlIgogICAgICAgIGNsYXNzPSJwb3N0LWltYWdlIgogICAgICAvPgogICAgICA8ZGl2IGNsYXNzPSJwb3N0LWluZm8iPgogICAgICAgIDxoMyBjbGFzcz0icG9zdC10aXRsZSI+U3BhY2VjcmFmdDwvaDM+CiAgICAgICAgPHAgY2xhc3M9InBvc3QtbWV0YSI+UG9zdGVkIG9uIEphbnVhcnkgMSwgMjAyMyBieSBQZXRlciBLZXlnZW48L3A+CiAgICAgICAgPHAgY2xhc3M9InBvc3QtZXhjZXJwdCI+U3BhY2UgdmVoaWNsZSBmb3IgY29sb25pemF0aW9uPC9wPgogICAgICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJyZWFkLW1vcmUiPlJlYWQgTW9yZTwvYT4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LmJsb2ctY2FyZCB7CiAgLyogQ2hhbmdlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgZGlzcGxheTogX19fOwogIGZsZXgtZGlyZWN0aW9uOiBfX187CiAgYWxpZ24taXRlbXM6IF9fXzsKICBqdXN0aWZ5LWNvbnRlbnQ6IF9fXzsKICAvKiBDaGFuZ2UgY29kZSBhYm92ZSB0aGlzIGxpbmUgKi8KICBoZWlnaHQ6IDQwMHB4OwogIHdpZHRoOiA0MDBweDsKICBib3JkZXI6IDFweCBzb2xpZCAjY2NjOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMHB4OwogIG1hcmdpbjogMCBhdXRvOwp9CgoucG9zdC1pbWFnZSB7CiAgaGVpZ2h0OiBhdXRvOwogIG1heC13aWR0aDogMTAwJTsKICBkaXNwbGF5OiBibG9jazsKfQoKLnBvc3QtaW5mbyB7CiAgcGFkZGluZzogMjBweDsKfQoKLnBvc3QtdGl0bGUgewogIGZvbnQtc2l6ZTogMS41cmVtOwogIG1hcmdpbjogMCAwIDEwcHggMDsKfQoKLnBvc3QtbWV0YSB7CiAgZm9udC1zaXplOiAxcmVtOwogIGNvbG9yOiAjODg4OwogIG1hcmdpbjogMCAwIDEwcHggMDsKfQoKLnBvc3QtZXhjZXJwdCB7CiAgbWFyZ2luOiAwIDAgMjBweCAwOwp9CgoucmVhZC1tb3JlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDA3YmZmOwogIGNvbG9yOiAjZmZmOwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA1cHg7CiAgcGFkZGluZzogMTBweCAyMHB4OwogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0=

- `display: flex;` kan kun anvendes på forældreelementet.
- Standardretningen for flex er række, så vi skal ændre det ved at bruge egenskaben `flex-direction: column;`.
- For at centrere elementer horisontalt, anvend `align-items: center;`.
- For at fordele elementer vertikalt, anvend `justify-content: space-between;`.

LmJsb2ctY2FyZCB7CiAgLyogQ2hhbmdlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOwogIC8qIENoYW5nZSBjb2RlIGFib3ZlIHRoaXMgbGluZSAqLwogIGhlaWdodDogNDAwcHg7CiAgd2lkdGg6IDQwMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIHBhZGRpbmc6IDEwcHg7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi5wb3N0LWltYWdlIHsKICBoZWlnaHQ6IGF1dG87CiAgbWF4LXdpZHRoOiAxMDAlOwogIGRpc3BsYXk6IGJsb2NrOwp9CgoucG9zdC1pbmZvIHsKICBwYWRkaW5nOiAyMHB4Owp9CgoucG9zdC10aXRsZSB7CiAgZm9udC1zaXplOiAxLjVyZW07CiAgbWFyZ2luOiAwIDAgMTBweCAwOwp9CgoucG9zdC1tZXRhIHsKICBmb250LXNpemU6IDFyZW07CiAgY29sb3I6ICM4ODg7CiAgbWFyZ2luOiAwIDAgMTBweCAwOwp9CgoucG9zdC1leGNlcnB0IHsKICBtYXJnaW46IDAgMCAyMHB4IDA7Cn0KCi5yZWFkLW1vcmUgewogIGJhY2tncm91bmQtY29sb3I6ICMwMDdiZmY7CiAgY29sb3I6ICNmZmY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIHRleHQtYWxpZ246IGNlbnRlcjsKfQ==

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.

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

Udfordring: Opbyg et Vertikalt Blogkort med Flexbox