Stepik О курсе
Подробнее
CSS Flexbox – направлен на обеспечение более эффективного способа размещения, выравнивания и распределения пространства между элементами в контейнере, даже если их размер неизвестен и / или динамичен (Flex значит «гибкий»).
В этом курсе мы разберём все особенность вёрстки на CSS Flexbox и используем её на практике. Курс разбит на несколько разделов, каждый из которых фокусируется на одном из аспектов работы с CSS FlexBox:
- Работа с flex и изменений его осей
- Переносом контента с помощью flex-wrap
- Заданием порядка элементов
- Выравнивание и центрированием по всех элементов
- Позиционированием элементов внутри строки или столбца
- Переопределение позиции для каждого элемента
- Определением размера элементов
- Поведением при адаптиве
В конце каждого блока вас ждёт тест. Так же курс содержит несколько практических упражнений для закрепления материала и применения на реальных макетах.
В результате курса вы получите знания и навыки для эффективной вёрстке на CSS Flexbox. А если возникнут вопросы, вы всегда можете обратиться в чат учеников с вопросом.
Отзывы студентов о других моих курсах:
Node.js
Невероятный курс! Очень простым, доступным и приятным языком качественно объясняются основы. От простого к сложному приходим к пониманию того, как устроен Node.js. Практически нет пробелов в объяснении материала. Рекомендую! - Alexander D.
TypeScript
Отличный курс. Хорошо охватывает как базовую информацию, так и продвинутые техники. Особенно порадовал раздел Паттерны, где рассказывается на реальных примерах применение того или иного паттерна проектирования. Финальная задача тоже очень интересна и хорошо демонстрирует преимущества TS и паттернов на практической - Сергей
React и Next.js
Прошел половину курса, что могу сказать. Не жалею что взял, узнал много нового, но на мой взгляд без базовых знаний реакта будет сложновато. Автор отзывчивый, в тот же день отвечает на все вопросы. Все объясняется доходчиво и очень радует тот факт, что курс постепенно дополняется отвечая на самые распространенные вопросы учеников. С удовольствием продолжу обучение. Высшая оценка!) - Роман
Требования
Что нужно для старта
- Базовые знания HTML и CSS
Результат
Что вы получите
- Уверенно использовать CSS Flexbox для вёрстки
- Позиционировать элементы внутри контейнера
- Создавать сложный сетки
- Применять CSS Flexbox на практике
- Работать с адаптивным дизайном на Flexbox
Аудитория
Для кого этот курс
- Для разработчиков и дизайнеров, которые хотят улучшить своё знание fontend. Для тех, кто хочет структурировать знания о flexbox. Для начинающих верстальщиков.
Содержание
6 занятийПрограмма курса
№ТемаЧто внутри
01Введение
- Что такое Flexbox?
- Как устроен курс?
- Настройка окружения
- Обзор курсов
- Перенос курса
02Знакомство с flexbox
- Введение во Flexbox
- Работа с flex-direction
- Flex-wrap
- Порядок элементов
- Flex-flow
- Тест - Знакомство с flexbox
03Выравнивание и центрирование
- Justify-content
- Align-items
- Align-content
- Align-self
- Auto margin
- Тест - Выравнивание и центрирование
04Размеры элементов
- Размеры и flex
- Flex-grow, flex-shrink и flex-basis
- Flex-wrap с flex-basis
- Gap row-gap column-gap
- Тест - Размеры элементов
05Практика
- Упражнение - Вёрстка меню
- Упражнение - Адаптив flexbox
06Заключение
- Куда дальше?
01Введение
- Что такое Flexbox?
- Как устроен курс?
- Настройка окружения
- Обзор курсов
- Перенос курса
02Знакомство с flexbox
- Введение во Flexbox
- Работа с flex-direction
- Flex-wrap
- Порядок элементов
- Flex-flow
- Тест - Знакомство с flexbox
03Выравнивание и центрирование
- Justify-content
- Align-items
- Align-content
- Align-self
- Auto margin
- Тест - Выравнивание и центрирование
04Размеры элементов
- Размеры и flex
- Flex-grow, flex-shrink и flex-basis
- Flex-wrap с flex-basis
- Gap row-gap column-gap
- Тест - Размеры элементов
05Практика
- Упражнение - Вёрстка меню
- Упражнение - Адаптив flexbox
06Заключение
- Куда дальше?
Организатор
Автор курса
Мнения учеников
Отзывы о курсе
Оставьте отзыв
Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.
Оставьте заявку
Консультант ответит на вопросы о курсе «CSS Flexbox – полный курс и практика его использования» и поможет разобраться в деталях обучения.
Нажимая кнопку, вы даете согласие на обработку персональных данных
Информация обновлена 3 сентября 2026 г.
Продолжить выбор
Похожие курсы
Начать без затрат
