Закрыто Мастер класс по FlexBox вёрстке

[Musalini]

Основные преимущества FlexBox:

полностью резиновая модель вёрстки
адаптивный сайт без media-запросов
удобные выравнивания элементов по горизонтали и вертикали
изменение порядка HTML-элементов прямо из CSS
с 2014 года поддержка всеми новыми браузерами
простой и лаконичный CSS-код на выходе

Для более полного понимания технологии рекомендую посмотреть видео


Программа мастер-класса:
Урок 1 — теория FlexBox

Причины появления FlexBox
Примеры неудобств в привычной вёрстке
Поддержка браузерами
Понимание flex-осей
Резервирование места
Управление сжатием
Управление выравниванием
Изменение направления контента
Изменение порядка элементов
Феерическая адаптивность

Урок 2 — вёрстка макета

Разбор дз с первого урока
Легко прижимаем подвал к низу
Вертикальный поток обёрток
Привычная wrap-техника
Анализ макета: margin vs display: flex
flex: 1 1 auto; — чудеса адаптивной вёрстки
Анализ динамического изменения количества элементов
rem — телефоны скажут спасибо
flex + media-запросы
Примеры, когда не стоит использовать flex

Скачать
Продажник