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

Тема в разделе "Верстка", создана пользователем Fadey, 16 сен 2015.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. Fadey

    Fadey

    Регистр.:
    2 сен 2012
    Сообщения:
    497
    Симпатии:
    484
    Выкладываю для облегчения ваших трудов, друзья:)

    Основные преимущества 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
    Продажник:
     
    Последнее редактирование: 16 сен 2015
    vada, funnywheel и NikroVir нравится это.
  2. guru31337

    guru31337 Постоялец

    Регистр.:
    8 сен 2012
    Сообщения:
    60
    Симпатии:
    28
    Хорошая тема, правда среди любителей поддержки антикварных браузеров не очень популярна. В дополнение дам ссылку на хорошую статью на хабре, довольно коротко и понятно - Перейти по ссылке
     
    vada нравится это.
Статус темы:
Закрыта.