CSS Flexbox: полное руководство
Научитесь создавать гибкие и адаптивные макеты с помощью CSS Flexbox. Курс охватывает все свойства flexbox от основ до продвинутых техник с интерактивными примерами.
Начать курсПрограмма курса
Последовательно изучайте материал от простого к сложному
Введение в Flexbox
Что такое Flexbox и почему он изменил подход к вёрстке. Основные концепции и терминология.
Свойства flex-контейнера
Изучаем свойства flex-контейнера: flex-direction, flex-wrap, justify-content, align-items и align-content.
Свойства flex-элементов
Управляем поведением отдельных элементов: flex-grow, flex-shrink, flex-basis, order и align-self.
Выравнивание элементов
Глубокое погружение в выравнивание: комбинации justify-content и align-items, margin: auto и другие техники.
Практика: навигационное меню
Создаём адаптивное навигационное меню с логотипом, ссылками и кнопками используя Flexbox.
Практика: сетка карточек
Создаём адаптивную сетку карточек товаров, статей и другого контента с помощью Flexbox.
Заключение и ресурсы
Подводим итоги курса. Шпаргалка по всем свойствам, полезные ресурсы и следующие шаги.