Зміст курсу
Основи CSS
Основи CSS
Челендж: Flexbox
Давайте дослідимо можливості flexbox, створивши картку товару із зображенням, описом та ціною. За замовчуванням, всі елементи складаються в стовпчик, один під одним. Однак наша мета - змінити цю поведінку за допомогою flexbox.
Завдання
Розглянемо наступну структуру HTML:
Завдання полягає в тому, щоб модифікувати CSS таким чином, щоб досягти наступного:
- Визначте батьківський елемент, що містить зображення товару (тег
img
з класомproduct-image
) та інформацію про товар (тегdiv
з класомproduct-info
). - Застосуйте flexbox до визначеного батьківського елемента (тег
div
з класомshopping-card
). - Відцентруйте товари в картці покупця по вертикалі.
index
index
index
- Застосуйте
display: flex;
до батьківського елемента з класомshopping-card
. - За замовчуванням напрямок flex - рядок, тому немає необхідності змінювати значення властивості
flex-direction
. - Щоб вирівняти елементи по вертикалі, використовуйте
align-items: center;
.
index
index
index
Дякуємо за ваш відгук!