Интенсивный курс «Продвинутый HTML и CSS»27 февраля — 2 апреля 2017
Флексбокс, часть 2

Флексбокс, часть 2

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

Начать

Флекс-элементы и блочная модельОсобенности свойства 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
Много карточек
Испытание: гибкий поток