Challenge: Flexbox

Let's explore the power of flexbox by creating a shop card with a product image, some description, and the price. By default, all the elements are stacked in a column, one below the other. However, our goal is to change this behavior using flexbox.

Task

Consider the following HTML structure:

html
9
1
2
3
4
5
6
7
8
9
<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>

The task is to modify the CSS to achieve the following:

• Identify the parent element containing both the product image (img tag with the product-image class) and product information (div tag with the product-info class).

• Apply flexbox to the identified parent element (the div tag with the shopping-card class).

• Vertically center the items within the shopping card.

• Apply display: flex; to the parent element with the class shopping-card.

• The default flex direction is row, so there is no need to change the value of the flex-direction property.

• To center items vertically, use align-items: center;.