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

[Fadey]

Выкладываю для облегчения ваших трудов, друзья

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

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

Для более полного понимания технологии рекомендую посмотреть видео

Программа мастер-класса:

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

Продажник:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Скачать:

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[guru31337]

Хорошая тема, правда среди любителей поддержки антикварных браузеров не очень популярна. В дополнение дам ссылку на хорошую статью на хабре, довольно коротко и понятно - Для просмотра ссылки Войди или Зарегистрируйся