Завдання: Створення Макета Картки Магазину за Допомогою Flexbox

Досліджуємо можливості 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;.