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

Завдання

Розглянемо наступну структуру HTML:

html

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

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

• Застосуйте flexbox до визначеного батьківського елемента (тег div з класом shopping-card).

• Відцентруйте товари в картці покупця по вертикалі.

• Застосуйте display: flex; до батьківського елемента з класом shopping-card.

• За замовчуванням напрямок flex - рядок, тому немає необхідності змінювати значення властивості flex-direction.

• Щоб вирівняти елементи по вертикалі, використовуйте align-items: center;.