Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Челендж: Flexbox | Флексбокс
Основи CSS
course content

Зміст курсу

Основи CSS

Основи CSS

2. CSS для Тексту
3. Бокс Модель та Відстань між Елементами
4. Флексбокс
5. Декоративні Ефекти

bookЧелендж: Flexbox

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

Завдання

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

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

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

index

css

index

js

index

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

index

css

index

js

index

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

Як ми можемо покращити це?

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

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