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

FlexBox

В этом мастер классе по FlexBox верстке от Дмитрия Лаврика приглашаем Вас изучить новый способ разбивки контента на блоки, пришедший на смену и/или в помощь стандартным методам вёрстки.

Flexbox представляет новый способ отображения блоков в макете с помощью css3 и предназначен для облегчения расположения элементов относительно друг друга. В последнее время версии браузеров меняются достаточно быстро, так что вы будете в теме, когда модель flexbox будет поддерживаться широко в реальных проектах. Попав к Дмитрию, мы поняли важную вещь: большая часть того, что знали – это то, как НЕ надо программировать и делать сайты. Дмитрий же научил и показал, как действительно надо правильно программировать, сильно углубил и привёл в порядок знания по web-программированию.

Для чего нужен Flexbox?

Разработчики на протяжении долгого времени использовали таблицы, float-элементы, inline-block и другие CSS свойства, чтобы придать блокам нужное расположение. Однако ни один из вышеперечисленных инструментов не был предназначен для создания сложных страниц и приложений, которые в настоящее время используются почти в каждом проекте. Простые вещи, как вертикальное центрирование, осуществлялись достаточно сложно. Создание же макета на основе жидких сеток вообще считается верхом профессионализма, вот почему широкое распространение получили CSS-фреймворки на основе сеток. Итак, если множество проектов часто используют жидкие сетки, блоки одинаковой высоты, вертикальное центрирование блоков и т.д., то возникает вопрос: “Почему до сих пор нет свойства, которе позволило бы осуществлять эти вещи быстро и просто?”

Целью Flexbox является решение всех этих проблем!

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

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

На выходе вы получите полностью готовый макет, свёрстанный с помощью FlexBox!

Урок 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

Не забываем подписываться в наши социальные группы и на e-mail рассылку. Вы всегда будете в курсе новостей нашего портала Видео Училка