Создание сайтов Дмитрий Лаврик - Мастер класс по FlexBox вёрстке

[ogurchik]

Автор: Дмитрий Лаврик
Название: Мастер класс по FlexBox вёрстке
Основные преимущества 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. Проблем быть не должно, потому что даже девятый "осёл" автоматически обновляется до одиннадцатого. Но, разумеется, ни о какой поддержке
2. Если FlexBox — это круто, почему dmitrylavrik.ru свёрстан обычным образом?
Эта вёрстка делалась ещё до того, как FlexBox стал адекватно поддерживаться всеми браузерами. Переделывать исключительно ради принципа? — Оставлю это бредовое занятие перфекционистам. В новых проектах FlexBox используется.

3. Будет ли домашнее задание?
Да, именно поэтому мастер-класс и разбит на две части. За неделю, которая будет между уроками, вы сможете поупражняться в вёрстке с помощью FlexBox.


Скачать: