Все для CMS » Курсы и мануалы » Мастер класс по FlexBox вёрстке

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

  • 3
Данный материал предоставлен сайтом All4Cms.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно Мастер класс по FlexBox вёрстке.
Мастер класс по 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.
    [media=https://youtu.be/ks39Otlms8U]

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

    Яндекс Диск Cloud.Mail Mega.co.nz Демо / Инфо

    Если ссылка на скачивание файла не доступна - дайте нам знать об этом через форму обратной связи
    • Курсы и мануалы
    • 31-08-2015, 01:06
    • 2 454
    Вернуться назад
    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.