Мастер класс по flexbox вёрстке

[HIDEOFF]

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

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

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

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

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

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

Часто задаваемые вопросы.
1. Слышал, что у FlexBox есть проблемы с поддержкой различными браузерами, — это правда?
Лишь отчасти. Новейшие версии всех браузеров поддерживают FlexBox. Проблем быть не должно, потому что даже девятый "осёл" автоматически обновляется до одиннадцатого. Но, разумеется, ни о какой поддержке
Продажник:

Скачать: