BananaMaster

7 Flexbox и как работают display: flex, justify-content, align-items - ( HTML and CSS, Front End )

Если что то забыли кликни для перехода на урок

📘 Практические задачи: Flexbox

Для каждой задачи создай отдельные классы в файле style.css и примени их к нужным тегам.

📌 Структура файлов: index.html + style.css

💡 Главное правило: display: flex всегда пишется на родителе, а не на дочернем элементе.

✏️ Задача 1 — flex-direction: row (по умолчанию)

Три блока стоят в ряд. Размеры родителя определи на глаз:

• Родитель — фон: red, размеры в px, добавь display: flex
• Дочерний 1 — фон: #e74c3c, размеры в %
• Дочерний 2 — фон: #3498db, размеры в %
• Дочерний 3 — фон: #2ecc71, размеры в %
• Дочерний 4 — фон: #2c3e50, размеры в %
• 💡 flex-direction: row — это значение по умолчанию, писать не обязательно

✏️ Задача 2

Три блока стоят в колонку. Размеры родителя определи на глаз:

• Родитель — фон: #8e44ad, размеры в px
• Дочерний 1 — фон: #f39c12, размеры в %
• Дочерний 2 — фон: #e74c3c, размеры в %
• Дочерний 3 — фон: #1abc9c, размеры в %

✏️ Задача 3

Блок прижат к центру по горизонтали. Размеры определи на глаз:

• Родитель — фон: #2d3436, размеры в px
• Дочерний — фон: #fdcb6e, размеры в %

✏️ Задача 4

Блок прижат к правому краю. Размеры определи на глаз:

• Родитель — фон: #00b894, размеры в px
• Дочерний — фон: #d63031, размеры в %

✏️ Задача 5

Блок прижат к центру по вертикали. Размеры определи на глаз:

• Родитель — фон: #6c5ce7, размеры в px
• Дочерний — фон: #fd79a8, размеры в %

✏️ Задача 6

Блок прижат к нижнему краю. Размеры определи на глаз:

• Родитель — фон: #0984e3, размеры в px
• Дочерний — фон: #ffeaa7, размеры в %

✏️ Задача 7

Блок прижат точно в центр по горизонтали и вертикали. Размеры определи на глаз:

• Родитель — фон: #e17055, размеры в px
• Дочерний — фон: #74b9ff, размеры в %

✏️ Задача 8

Три блока — крайние прижаты к краям, средний посередине. По вертикали все по центру. Размеры определи на глаз:

• Родитель — фон: #2c3e50, размеры в px
• Дочерний 1 — фон: #e74c3c, размеры в %
• Дочерний 2 — фон: #f1c40f, размеры в %
• Дочерний 3 — фон: #2ecc71, размеры в %

✏️ Задача 9

Колонка из двух блоков прижата к правому нижнему углу. Размеры определи на глаз:

• Родитель — фон: #6c5ce7, размеры в px
• Дочерний 1 — фон: #fd79a8, размеры в %
• Дочерний 2 — фон: #00cec9, размеры в %

✏️ Задача 10

Два flex-контейнера вложены внутрь одного. Размеры определи на глаз:

• Внешний родитель — фон: #dfe6e9, размеры в px, display: flex, justify-content: space-between
• Левый блок — фон: #b2bec3, ширина в %, сам является flex-контейнером: justify-content: space-between
• Левый → дочерний 1 — фон: #e74c3c, размеры в %
• Левый → дочерний 2 — фон: #3498db, размеры в %
• Правый блок — фон: #2d3436, ширина в %, сам является flex-контейнером: justify-content: center, align-items: center
• Правый → дочерний — фон: #fdcb6e, размеры в %

📌 Важно:
Каждый класс пишется отдельно в style.css.
Используйте только HTML и CSS.
Практикуйте свойства: display: flex, justify-content, align-items.