Uitdaging: Bouw een Verticale Blogkaart met Flexbox

Laten we een blogkaart maken. We moeten het standaard positioneringsgedrag aanpassen met behulp van flex.

De opdracht is:

• Identificeer het ouder-element dat zowel de postafbeelding (img-tag met de classnaam post-image) als de postinformatie (div-tag met de classnaam post-info) bevat.
• Pas flex-eigenschappen toe op het ouder-element (div-tag met de classnaam blog-card).
• Centreer de items horizontaal binnen de kaart.
• Zorg ervoor dat de items de volledige hoogte van de kaart beslaan.

• display: flex; kan alleen worden toegepast op het bovenliggende element.
• De standaard flexrichting is rij, dus deze moet worden aangepast met de eigenschap flex-direction: column;.
• Voor horizontaal centreren van items, gebruik align-items: center;.
• Voor verticale spreiding van items, gebruik justify-content: space-between;.