Для каждой задачи создай отдельные классы в файле style.css и примени их к нужным тегам.
📌 Структура файлов: index.html + style.css
💡 Главное правило: display: flex всегда пишется на родителе, а не на дочернем
элементе.
Четыре одинаковых блока равномерно распределены по всей ширине контейнера.
px.Три блока расположены друг под другом и находятся по центру контейнера по горизонтали.
Три блока расположены друг под другом. Первый касается верхнего края, второй находится посередине, третий касается нижнего края.
px.Три блока находятся у нижнего края контейнера.
px.Четыре блока находятся у нижнего края контейнера и распределены равномерно.
px.Слева расположен один высокий блок. Справа — два блока друг под другом. Верхний касается верхнего края, нижний — нижнего.
Контейнер состоит из двух частей. Слева расположены два блока — один сверху, второй снизу. Справа находится один блок, расположенный ровно по центру.
В центре большого контейнера находится карточка. Внутри карточки три блока расположены друг под другом. Верхний касается верхнего края карточки, нижний — нижнего, а все блоки выровнены по центру по горизонтали.
Повтори расположение блоков.
px.
Важно:
Каждый класс пишется отдельно в style.css.
Используйте только HTML и CSS.
Практикуйте свойства:
display: flex,
flex-direction,
justify-content,
align-items.