Челендж: 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
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Запитайте мені питання про цей предмет
Сумаризуйте цей розділ
Покажіть реальні приклади
Awesome!
Completion rate improved to 2.5
Челендж: 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
Дякуємо за ваш відгук!