Challenge: Build a Layout with Flexbox

Task

Let's create a blog card. We need to change the default positioning behavior with the help of flex.

The task is to:

• Identify the parent element containing both the post image (img tag with the post-image class name) and post information (div tag with the post-info class name).
• Apply flex properties to the parent element (div tag with the blog-card class name).
• Horizontally center the items within the card.
• Ensure that items cover the entire height of the card.

• display: flex; can only be applied to the parent element.
• The default flex direction is row, so we need to change it using the flex-direction: column; property.
• To center items horizontally, use align-items: center;.
• To space items vertically, use justify-content: space-between;.