Мастер класс по FlexBox вёрстке (Дмитрий Лаврик)

​

Мастер класс по FlexBox вёрстке Дмитрия Лаврика
Основные преимущества FlexBox:​

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

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

1. Причины появления FlexBox
2. Примеры неудобств в привычной вёрстке
3. Поддержка браузерами
4. Понимание flex-осей
5. Резервирование места
6. Управление сжатием
7. Управление выравниванием
8. Изменение направления контента
9. Изменение порядка элементов
10. Феерическая адаптивность

Спойлер: Продолжение описания

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

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

Часто задаваемые вопросы
1. Слышал, что у FlexBox есть проблемы с поддержкой различными браузерами, — это правда?
Лишь отчасти. Новейшие версии всех браузеров поддерживают FlexBox. Проблем быть не должно, потому что даже девятый "осёл" автоматически обновляется до одиннадцатого. Но, разумеется, ни о какой поддержке <= IE8 речи быть не может. При этом я рекомендую не зацикливаться на старых браузерах, а изучать новые и удобные технологии.
2. Если FlexBox — это круто, почему dmitrylavrik.ru свёрстан обычным образом?
Эта вёрстка делалась ещё до того, как FlexBox стал адекватно поддерживаться всеми браузерами. Переделывать исключительно ради принципа? — Оставлю это бредовое занятие перфекционистам. В новых проектах FlexBox используется.
3. Будет ли домашнее задание?
Да, именно поэтому мастер-класс и разбит на две части. За неделю, которая будет между уроками, вы сможете поупражняться в вёрстке с помощью FlexBox.

Более понятней для чего это нужно
В данном видео мы разберём три примера с проблемами классической вёрстки и лёгким решением этих проблем с помощью flexbox:

• вертикальные выравнивания,
• динамическое изменение количества элементов,
• адаптивная вёрстка для обтекаемых элементов

Скрытый текст. Открывается зарегистрированным пользователям.

Скрытый текст. Доступен только зарегистрированным пользователям.Нажмите, чтобы раскрыть...