Для кожного завдання створи окремі класи у style.css та застосуй їх до правильних тегів.
📌 Структура файлів: index.html + style.css
💡 Ключове правило: display: flex завжди пишеться на батьківський елемент, а не на дочірній.
Три блоки стоять у рядку. Оціни розмір батьківського на око:
red, розміри в px, додай display: flex#e74c3c, розміри в %#3498db, розміри в %#2ecc71, розміри в %#2c3e50, розміри в %flex-direction: row — значення за замовчуванням, його не треба писатиТри блоки стоять у колонці. Оціни розмір батьківського на око:
green, розміри в px#f39c12, розміри в %#e74c3c, розміри в %#1abc9c, розміри в %#8e44ad, розміри в %Блок вирівняний по центру горизонтально. Оціни розміри на око:
#2d3436, розміри в px#fdcb6e, розміри в %Блок вирівняний до правого краю. Оціни розміри на око:
#00b894, розміри в px#d63031, розміри в %Блок вирівняний по вертикальному центру. Оціни розміри на око:
#6c5ce7, розміри в px#fd79a8, розміри в %Блок вирівняний до нижнього краю. Оціни розміри на око:
#0984e3, розміри в px#ffeaa7, розміри в %Блок розміщений точно по центру горизонтально та вертикально. Оціни розміри на око:
#e17055, розміри в px#74b9ff, розміри в %Три блоки — крайні притиснуті до країв, середній між ними. Всі вирівняні вертикально. Оціни розміри на око:
#2c3e50, розміри в px#e74c3c, розміри в %#f1c40f, розміри в %#2ecc71, розміри в %Колонка з двох блоків вирівняна до нижнього правого кута. Оціни розміри на око:
#6c5ce7, розміри в px#fd79a8, розміри в %#00cec9, розміри в %Два flex-контейнери вкладені всередину одного. Оціни розміри на око:
#dfe6e9, розміри в px, display: flex, justify-content: space-between#b2bec3, ширина в %, сам flex-контейнер: flex-direction: column, justify-content: space-between#e74c3c, розміри в %#3498db, розміри в %#2d3436, ширина в %, сам flex-контейнер: justify-content: center, align-items: center#fdcb6e, розміри в %
📌 Важливо:
Кожен клас пишеться окремо у style.css.
Використовуй тільки HTML та CSS.
Практикуй властивості:
display: flex,
flex-direction,
justify-content,
align-items.