Интенсивный курс «Базовый HTML и CSS»16 января — 22 февраля 2017
Флексбокс, часть 1

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

Рассмотрим основы нового механизма «гибкой» раскладки — флексбокс. Сначала потренируемся «на котиках» направлять оси флекс-контейнера, выравнивать и переносить флекс-элементы, а затем научимся простому применению флексбокса в реальных интерфейсах.

Начать

Флексбокс, display: flexГлавная ось, flex-directionПоперечная осьРаспределение флекс-элементов, justify-content

Следующие задания доступны по подписке
Оформите подписку, чтобы пройти этот и другие платные курсы целиком.
Подписаться

В начале и в конце главной оси
Равномерное распределение
Выравнивание флекс-элементов, align-items
В начале и в конце поперечной оси
Выравнивание элементов по базовой линии
Эгоистичное выравнивание, align-self
Выравнивание одного элемента по базовой линии
Испытание: простая палитра
Перенос флекс-элементов, flex-wrap
Перенос в обратном порядке
Выравнивание строк флекс-контейнера, align-content
align-content: stretch и align-items
align-content: не-stretch и align-items
Остальные значения align-content
Порядковый номер флекс-элемента, order
Испытание: палитра посложнее
Идеальное центрирование, margin: auto
Идеальное центрирование, флекс-выравнивания
«Гибкое» меню
«Гибкое» меню, часть 2
«Гибкое» меню, часть 3
Вертикальный ряд иконок
Вертикальный ряд иконок, часть 2
Вертикальный ряд иконок, часть 3
Сортировка элементов на CSS
Блоки одинаковой высоты
Испытание: сложные палитры