Вивчайте Виклик: Застосування Концепцій 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).
Вертикальне вирівнювання елементів усередині картки магазину.

index.html

index.css

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

index.html

index.css

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 4. Розділ 6

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you show me the CSS code needed to achieve this?

What does the final layout look like after applying these changes?

Can you explain how align-items: center works in this context?

Свайпніть щоб показати меню

Завдання

Розгляньте наступну 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).
Вертикальне вирівнювання елементів усередині картки магазину.

index.html

index.css

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

index.html

index.css

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 4. Розділ 6