Код сурка Играйте в телеграм-игру «Код сурка»
Шесть дней, шесть ночей, тысячи участников и шикарные призы

Часть 2: Флексбокс. Погружение

25 заданий и 3 испытания

Узнаем как управлять размерами и отступами флекс-элементов и как работают коэффициенты растяжения и сжатия, а также потренируемся создавать «гибкие» раскладки и элементы интерфейса.

Оформить подписку
Флекс-элементы и блочная модельЗадание
Особенности свойства marginЗадание
Выравнивание и внешние отступыЗадание
Направление главной оси и внешние отступыЗадание
Базовый размер флекс-элемента, flex-basisЗадание
Испытание: кубизмИспытание
Коэффициент растягивания элементов, flex-growЗадание
Пропорциональное растягивание элементовЗадание
Расчёт итогового размера с flex-growЗадание
Коэффициент сжатия элементов, flex-shrinkЗадание
Пропорциональное сжатие элементовЗадание
Расчёт итогового размера с flex-shrinkЗадание
flex-shrink и min-widthЗадание
Испытание: мастер коэффициентовИспытание
Сокращённое свойство flexЗадание
Многострочный флекс-контейнер и flex-shrinkЗадание
Многострочный флекс-контейнер и flex-growЗадание
flex-basis: 100% и flex-wrapЗадание
Заголовок с описанием на флексбоксахЗадание
Заголовок с описанием, часть 2Задание
«Гибкое» меню с переполнениемЗадание
«Гибкое» меню с переполнением, часть 2Задание
Поля ввода с динамической ширинойЗадание
Карточка курсаЗадание
Карточка курса, часть 2Задание
Карточка курса, часть 3Задание
Много карточекЗадание
Испытание: гибкий потокИспытание