Давайте дослідимо можливості flexbox, створивши картку товару із зображенням, описом та ціною. За замовчуванням, всі елементи складаються в стовпчик, один під одним. Однак наша мета - змінити цю поведінку за допомогою flexbox.

Завдання

Розглянемо наступну структуру 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>

Завдання полягає в тому, щоб модифікувати CSS таким чином, щоб досягти наступного:

• Визначте батьківський елемент, що містить зображення товару (тег img з класом product-image) та інформацію про товар (тег div з класом product-info).
• Застосуйте flexbox до визначеного батьківського елемента (тег div з класом shopping-card).
• Відцентруйте товари в картці покупця по вертикалі.

• Застосуйте display: flex; до батьківського елемента з класом shopping-card.
• За замовчуванням напрямок flex - рядок, тому немає необхідності змінювати значення властивості flex-direction.
• Щоб вирівняти елементи по вертикалі, використовуйте align-items: center;.