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

Славный малый
Команда форума
Редактор
Премиум
Активный участник
Регистрация
26 Мар 2018
Сообщения
19.040
Реакции
324.317
Монетки
137485.5
    Голосов: 0
    0.0 5 0 0 https://tor9.sharewood.me/threads/%D0%94%D0%BC%D0%B8%D1%82%D1%80%D0%B8%D0%B9-%D0%9B%D0%B0%D0%B2%D1%80%D0%B8%D0%BA-%D0%9C%D0%B0%D1%81%D1%82%D0%B5%D1%80-%D0%BA%D0%BB%D0%B0%D1%81%D1%81-%D0%BF%D0%BE-flexbox-%D0%B2%D1%91%D1%80%D1%81%D1%82%D0%BA%D0%B5.15626/
  • #1
Автор: Дмитрий Лаврик
Название: Мастер класс по FlexBox вёрстке


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

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


Подробнее:
Для просмотра содержимого вам необходимо авторизоваться.


Скачать:
Для просмотра содержимого вам необходимо авторизоваться
 
Последнее редактирование модератором:
11
Сверху Снизу