CSS: Основы Flex

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

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

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

Описание

На этом курсе вы изучите CSS Flex. Вы узнаете больше о том, как позиционировать элементы по вертикали и горизонтали. В итоге вы научитесь позиционировать элементы на странице, выравнивать их и понимать систему создания колоночной системы. Flex пригодится, если вы решите создавать адаптивные макеты и использовать гибкие элементы. Знания из этого курса помогают программистам управлять элементами на странице по двум осям и выравнивать элементы относительно них.

Перед началом прохождения курса советуем пройти курсы:

• Основы верстки контента
• CSS: Позиционирование элементов

Программа курса

• 1

  Введение

  Знакомимся с целями и задачами курса

  теория
• 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 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже