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

FlexBox

В этом мастер классе по 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 рассылку. Вы всегда будете в курсе новостей нашего портала Видео Училка


Похожее