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

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

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

Начать

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