Мы используем cookie для стабильной работы сервиса. Подробнее

CSS Flexbox – полный курс и практика его использования

ФорматОнлайн
Объём6 занятий
О курсе

Подробнее

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Заключение

- Куда дальше?

Организатор

Автор курса

StepikStepik
Stepik — образовательная платформа и конструктор онлайн-курсов. Мы разрабатываем алгоритмы адаптивного обучения, сотрудничаем с авторами MOOC, помогаем в проведении олимпиад и программ переподготовки. Наша цель — сделать образование открытым и удобным. Stepik — широко известная российская образовательная платформа, основанная в 2013 году. На Stepik зарегистрировано более миллиона пользователей из России и стран СНГ. В настоящее время на Stepik представлены несколько тысяч учебных курсов на самые разные темы.
Подробнее об авторе
Мнения учеников

Отзывы о курсе

Оставьте отзыв

Расскажите о качестве обучения, поддержке и результате. Это поможет другим выбрать организацию осознанно.

Напишите ваш коментарий, не менее 30 символов

Нажимая кнопку, вы даете согласие на обработку персональных данных

Оставьте заявку

Консультант ответит на вопросы о курсе «CSS Flexbox – полный курс и практика его использования» и поможет разобраться в деталях обучения.

Комментарий ...

Нажимая кнопку, вы даете согласие на обработку персональных данных

Информация обновлена 3 сентября 2026 г.

Продолжить выбор

Похожие курсы

Vue.js 3, Vue Router и Pinia
Vue.js 3, Vue Router и Pinia

В этом курсе мы изучим Vue, Vue Router и Pinia, создавая два полноценных приложения. Мы сделаем приложение для отображения прогноза погоды и Saas сервис хранения веб закладок. Это…

Онлайн15 занятий
3 999 ₽
Node js для Front End
4 месяца
Node js для Front End

Backend разработка на Node.js: Express.js, NestJS фреймворки. Работа с базами данных PostgreSQL, MongoDB. Создание REST API, аутентификация и авторизация. WebSockets для реального…

ОнлайнСредний
100 000 ₽от 5 555 ₽/мес на 18 мес.
Вёрстка на HTML & CSS для начинающих
30 минут в день
Вёрстка на HTML & CSS для начинающих

В этом курсе вы научитесь с нуля основам HTML и CSS, которые нужны для создания сайтов и уже сможете выполнять довольно серьезные работы в этой области. Мы будем изучать язык гипе…

Онлайн8 занятий
490 ₽
ReactJS - Разработка WEB клиентских приложений, использование библиотек Redux и функций Hooks
24 ак.часа
ReactJS - Разработка WEB клиентских приложений, использование библиотек Redux и функций Hooks

На протяжении всего курса, слушатели вместе с тренером строят конкретные приложения с использованием классов React и функций. На основе теоретических знаний, на конкретных данных,…

Онлайн4 занятий
54 000 ₽
React Native и Expo Router
React Native и Expo Router

В этом курсе мы изучим React Native и Expo Router написав полноценное мобильное приложение с авторизацией и нативными возможностями. Этот курс подойдёт тем, кто хочет погрузиться…

Онлайн16 занятий
3 999 ₽
Начать без затрат

Бесплатные курсы

Angular 14 - написание приложения
Бесплатно10 академических часов
Angular 14 - написание приложения

Обновленный быстрый курс по Angular 14, который будет актуален на момент 2022 года. В рамках курса напишем полноценное приложение, на примере которого разберем ключевые моменты да…

Онлайн1 занятий
Видеоуроки
Бесплатно
Практика Frontend разработчика 2025
Бесплатно48 академических часов
Практика Frontend разработчика 2025

Полный курс по созданию Frontend приложения с нуля. Это отличная практика для начинающих разработчиков, создание такого приложения даст вам отличный опыт владения HTML и CSS, ведь…

Онлайн1 занятий
Видеоуроки
Бесплатно