Курс «CSS: Flex»

CSS3

Flex

Адаптивность

Последнее обновление: 20 октября 2025 г.

Оформить подписку

3 900 рублей в месяц за все курсы

Включено в курс

9 уроков (видео и/или текст)

7 упражнений в тренажере

35 проверочных тестов

Самостоятельная работа

Дополнительные материалы

Доступ ко всем курсам

Описание

На этом курсе вы изучите CSS Flex. Вы узнаете больше о том, как позиционировать элементы по вертикали и горизонтали. В итоге вы научитесь позиционировать элементы на странице, выравнивать их и понимать систему создания колоночной системы. Flex пригодится, если вы решите создавать адаптивные макеты и использовать гибкие элементы. Знания из этого курса помогают программистам управлять элементами на странице по двум осям и выравнивать элементы относительно них.

Чему вы научитесь

Применять базовые свойства CSS Flexible Box Layout.
Управлять HTML-элементами по вертикали и горизонтали с помощью Flex.
Создавать адаптированные для мобильных устройств макеты.
Создавать гибкие элементы, которые будут менять ширину и высоту.

Программа

1	Введение Знакомимся с целями и задачами курса
2	Что такое Flex? Поговорим о концепции Flex, преимуществах и сценариях использования
3	Флекс-контейнер Знакомимся с флекс-контейнерами и возможностями определения главной оси для рендера элементов
4	Перенос элементов в контейнере Поговорим о способах переноса элементов внутри флекс-контейнера и научимся пользоваться свойством flex-wrap
5	Выравнивание элементов по главной оси Поговорим о способах выравнивания элементов по главной оси внутри флекс-контейнера, познакомимся со свойством justify-content
6	Выравнивание элементов по поперечной оси Поговорим о способах выравнивания элементов по поперечной оси внутри флекс-контейнера, познакомимся со свойством align-items
7	Свойства Flex-элементов. Гибкость. Flex-grow Поговорим о свойствах для работы с элементами внутри флекс-контейнеров, изучим свойство Flex-grow
8	Свойства Flex-элементов. Гибкость Поговорим о свойствах для работы с элементами внутри флекс-контейнеров, изучим свойства flex-shrink, flex-basis, flex
9	Свойства Flex-элементов. Расположение Поговорим о свойствах для работы с элементами внутри флекс-контейнеров, изучим свойства order и align-self