Вивчайте Завдання: Створення Макета з Використанням Flexbox

Завдання

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

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

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

index.html

index.css

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

index.html

index.css

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

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

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

Запитати АІ

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

Completion rate improved to 2.56

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

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

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

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

index.html

index.css

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

index.html

index.css

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

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

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