CSS: Основы Flex

Включено в курс

Чему вы научитесь

• Применять базовые свойства CSS Flexible Box Layout.
• Управлять HTML-элементами по вертикали и горизонтали с помощью Flex.
• Создавать адаптированные для мобильных устройств макеты.
• Создавать гибкие элементы, которые будут менять ширину и высоту.

Описание

С ростом количества веб-страниц и усложнением дизайна возникла острая проблема расположения элементов. Появление мобильных устройств показало, что текущих возможностей позиционирования недостаточно — у разработчиков возникла потребность в новом механизме, который позволит управлять элементами на экране. Таким механизмом стал CSS Flexible Box Layout. В этом курсе вы шаг за шагом изучите возможности механизма Flex и научитесь использовать его в проектах.

Уроки курса

• 1

  Введение

  Узнать о курсе посвящённому Flex

  теория
• 2

  Что такое Flex?

  Узнать о концепции Flex, преимуществах и сценариях использования

  теория

  тесты
• 3

  Флекс-контейнер

  Познакомиться с флекс-контейнерами и возможностями определения главной оси для рендера элементов

  теория

  тесты

  упражнение
• 4

  Перенос элементов в контейнере

  Узнать о способах переноса элементов внутри флекс-контейнера. Научиться пользоваться свойством flex-wrap

  теория

  тесты

  упражнение
• 5

  Выравнивание элементов по главной оси

  Узнать о способах выравнивания элементов по главной оси внутри флекс-контейнера. Познакомиться со свойством justify-content

  теория

  тесты

  упражнение
• 6

  Выравнивание элементов по перпендикулярной оси

  Узнать о способах выравнивания элементов по перпендикулярной оси внутри флекс-контейнера. Познакомиться со свойством align-items

  теория

  тесты

  упражнение
• 7

  Свойства Flex-элементов. Гибкость. Flex-grow

  Узнать о свойствах для работы с элементами внутри флекс-контейнеров. Изучить свойство Flex-grow

  теория

  тесты

  упражнение
• 8

  Свойства Flex-элементов. Гибкость

  Узнать о свойствах для работы с элементами внутри флекс-контейнеров. Изучить свойства flex-shrink, flex-basis, flex

  теория

  тесты

  упражнение
• 9

  Свойства Flex-элементов. Расположение

  Узнать о свойствах для работы с элементами внутри флекс-контейнеров. Изучить свойства order и align-self

  теория

  тесты

  упражнение
• 10

  Дополнительные материалы

  Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса

Формат обучения

Испытания

Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже

Впечатления

Алексей Довгань 17 июня 2020

Просто взрыв мозга, насколько это проще, чем float :) Особенно, когда padding и magrin ещё у блоков есть :) Вот что значит не следить за технологиями и делать всё по-старинке :)

Lenri Rodionova 06 мая 2020

Теперь я на самом деле понимаю как много задач решает flex! Спасибо за курс! Жаль, что нельзя теорию из уроков добавить в избранное!

Roman Serikov 05 ноября 2019

Сейчас немного изучаю верстку, делаю свой учебный проект. Должен сказать, что этот курс просто отлично помог. В интернете много всякого мусора на тему Flex. А тут все структурировано и по существую. Огромное спасибо ;)

Андрей Соколов 23 августа 2021

Спасибо! Очень интересно и познавательно.

Александр Веденьев 23 февраля 2021

Добрый вечер,

Спасибо за хороший курс, все объясняется доступным языком. Хоть у меня уже и был опыт работы с Flex ранее, но знания закрепились лишний раз. Не знаю, можно ли давать ссылки на сторонние ресурсы, но после такого курса отлично зайдет для закрепления материала следующая браузерная "игра": Flexbox Froggy