Вивчайте Завдання: Створення Макета з Використанням 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

Запитати АІ

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

Suggested prompts:

Can you show me the HTML structure for the blog card?

What CSS should I add to the `.blog-card` class to achieve the desired layout?

Can you explain the difference between `align-items` and `justify-content` in this context?

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

Створення картки блогу. Необхідно змінити стандартну поведінку позиціонування за допомогою 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