Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Челендж: Робота з Flexbox | Флексбокс
Основи CSS

bookЧелендж: Робота з Flexbox

Завдання

Створимо картку блогу. Нам потрібно змінити поведінку позиціонування за замовчуванням за допомогою flex.

Завдання полягає в наступному:

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

index.html

index.css

index.css

copy
  • Властивість display: flex; можна застосувати лише до батьківського елемента.
  • За замовчуванням напрямок flex - рядок, тому нам потрібно змінити його за допомогою властивості flex-direction: column;.
  • Щоб вирівняти елементи по центру по горизонталі, використовуйте align-items: center;.
  • Щоб вирівняти елементи по вертикалі, використовуйте justify-content: space-between;.
index.html

index.html

index.css

index.css

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

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

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

bookЧелендж: Робота з Flexbox

Завдання

Створимо картку блогу. Нам потрібно змінити поведінку позиціонування за замовчуванням за допомогою flex.

Завдання полягає в наступному:

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

index.html

index.css

index.css

copy
  • Властивість display: flex; можна застосувати лише до батьківського елемента.
  • За замовчуванням напрямок flex - рядок, тому нам потрібно змінити його за допомогою властивості flex-direction: column;.
  • Щоб вирівняти елементи по центру по горизонталі, використовуйте align-items: center;.
  • Щоб вирівняти елементи по вертикалі, використовуйте justify-content: space-between;.
index.html

index.html

index.css

index.css

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

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

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

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