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

[Moderator]

Мастер класс по FlexBox вёрстке Дмитрия Лаврика Основные преимущества FlexBox: полностью резиновая модель вёрстки адаптивный сайт без media-запросов удобные выравнивания элементов по горизонтали и вертикали изменение порядка HTML-элементов прямо из CSS с 2014 года поддержка всеми новыми браузерами простой и лаконичный CSS-код на выходе Программа мастер-класса Урок 1 — теория FlexBox Причины появления FlexBox Примеры неудобств в привычной вёрстке Поддержка браузерами Понимание flex-осей Резервирование места Управление сжатием Управление выравниванием Изменение направления контента Изменение порядка элементов Феерическая адаптивность Продолжение описания Урок 2 — вёрстка макета Разбор дз с первого урока Легко прижимаем подвал к низу Вертикальный поток обёрток Привычная wrap-техника Анализ макета: margin vs display: flex flex: 1 1 auto; — чудеса адаптивной вёрстки Анализ динамического изменения количества элементов rem - телефоны скажут спасибо flex + media-запросы Примеры, когда не стоит использовать flex Часто задаваемые вопросы 1. Слышал, что у FlexBox есть проблемы с поддержкой различными браузерами, — это правда? Лишь отчасти. Новейшие версии всех браузеров поддерживают FlexBox. Проблем быть не должно, потому что даже девятый "осёл" автоматически обновляется до одиннадцатого. Но, разумеется, ни о какой поддержке <= IE8 речи быть не может. При этом я рекомендую не зацикливаться на старых браузерах, а изучать новые и удобные технологии. 2. Если FlexBox — это круто, почему dmitrylavrik.ru свёрстан обычным образом? Эта вёрстка делалась ещё до того, как FlexBox стал адекватно поддерживаться всеми браузерами. Переделывать исключительно ради принципа? — Оставлю это бредовое занятие перфекционистам. В новых проектах FlexBox используется. 3. Будет ли домашнее задание? Да, именно поэтому мастер-класс и разбит на две части. За неделю, которая будет между уроками, вы сможете поупражняться в вёрстке с помощью FlexBox. Более понятней для чего это нужно В данном видео мы разберём три примера с проблемами классической вёрстки и лёгким решением этих проблем с помощью flexbox: вертикальные выравнивания, динамическое изменение количества элементов, адаптивная вёрстка для обтекаемых элементов ​