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

Материал прислал: shado4. Может быть удалено по первому запросу правообладателя.

Основные преимущества 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

Нравится36

Не нравится2

Павел

View Comments

  • круто что начали выкладывать нормальные курсы, а не хлам с глопарта
    даже по конкретной тематике пошли
    хотелось бы еще увидеть серию курсов, связанных с интернет-маркетингом, обычным маркетингом и бизнесом (особенно интересна тема бизнес-процессов и тому подобное)

    ставьте лайк, кто согласен со мной!

    11
  • Когда вижу что-то из технарской инфы очень радует. Вот это то что должны спрашивать..Не какие то там гкурсы по "безумным" заработкам, а реальная обучалка. Классно что это последнее время практикует OS. Может со временем многие поймут что именно это и есть деньги - реальные знания. Продолжать в том же духе! :cool:

    4
  • Я в шоке :shock: Столько полезностей за раз ещё не было :smile: Спасибо большое ! Вы лучшие :arrow:

    0
  • Хорошая штука. Все четко рассказывает и понятно. Мне понравилось побольше таких хороших видео!!!! :smile:

    0
  • Отличный материал просмотрю с интересом, админам благодарность за отличную работу ;-)

    0
  • Интересная штука) Сколько же я мучался с вертикальным выравниванием стандартными методами, а тут всё просто)

    -1
  • Хочу попробовать. Потом скажу как прислали ссылку на курс Есть 3 часа свободного
    времени в день?
    Тогда почему вы не зарабатываете
    от 900 рублей в интернете ежедневно? у кого есть?

    -2

Recent Posts

Программирование [Иван Шаматов] [Thinknetica] Тимлид: руководство по выживанию (2025)

ОПИСАНИЕ:Слив курса Тимлид: руководство по выживанию [Thinknetica] [Иван Шаматов]Этот воркшоп для вас, если:Вам хочется управлять…

10 часов ago

Программирование [Денис Матвеенко] [dmdev] Microservices (2025)

ОПИСАНИЕ:Слив курса Microservices [dmdev] [Денис Матвеенко]На вебинаре мы поговорим про историю возникновение микросервисов, начиная от…

10 часов ago

Программирование [Игорь Ким] [Stepik] Продуктовые метрики. Визуализация в Python и BI Yandex DataLens (2025)

ОПИСАНИЕ:Слив курса Продуктовые метрики. Визуализация в Python и BI Yandex DataLens [Stepik] [Игорь Ким]На курсе…

10 часов ago

Программирование [Влад Бурмистров] [Stepik] Начальный курс SQL: от новичка до специалиста (2025)

ОПИСАНИЕ:Слив курса Начальный курс SQL: от новичка до специалиста [Stepik] [Влад Бурмистров]Уверенно пишите SQL-запросы к…

10 часов ago

Программирование [Влад Бурмистров] [Stepik] Полный курс Python 3: от новичка до мастера (2025)

ОПИСАНИЕ:Слив курса Полный курс Python 3: от новичка до мастера (Питон, Пайтон) [Stepik] [Влад Бурмистров]Для…

10 часов ago

Программирование [Павел Старцев] [Stepik] Нейросети: от простейшего запроса до создания бота (2025)

ОПИСАНИЕ:Слив курса Нейросети: от простейшего запроса до создания бота [stepik] [Павел Старцев]Врывайся в мир ИИ…

11 часов ago

This website uses cookies.