Зміст курсу
Основи CSS
Основи CSS
Челендж: Робота з Flexbox
Завдання
Створимо картку блогу. Нам потрібно змінити поведінку позиціонування за замовчуванням за допомогою flex.
Завдання полягає в наступному:
- Визначте батьківський елемент, що містить зображення публікації (тег
img
з ім'ям класуpost-image
) та інформацію про публікацію (тегdiv
з ім'ям класуpost-info
). - Застосуйте властивості flex до батьківського елемента (тег
div
з ім'ям класуblog-card
). - Відцентруйте елементи в картці по горизонталі.
- Переконайтеся, що елементи займають всю висоту картки.
index
index
index
- Властивість
display: flex;
можна застосувати лише до батьківського елемента. - За замовчуванням напрямок flex - рядок, тому нам потрібно змінити його за допомогою властивості
flex-direction: column;
. - Щоб вирівняти елементи по центру по горизонталі, використовуйте
align-items: center;
. - Щоб вирівняти елементи по вертикалі, використовуйте
justify-content: space-between;
.
index
index
index
Все було зрозуміло?
Дякуємо за ваш відгук!
Секція 4. Розділ 7