CSS: Flex

Курс посвящён модулю Flex — одному из наиболее эффективных способов расположения блоков и распределения места между ними. Flex решил многие проблемы вёрстки, которые встречались при использовании Float и стандартного позиционирования. Это позволило облегчить работу при вёрстке макета. В этом курсе вы узнаете о том, что такое Flex и как он работает. Изучите возможности позиционирования по вертикали и горизонтали. Научитесь базовым свойствам 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

  теория

  упражнение

Испытания

Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки.

Автор

Никита Михайлов

Ключевые навыки: HTML, CSS, JS Frontend.

Много лет работал в аутсорсинговой компании. Развивал клиентские проекты, делал фичи для разных CMS. В основном верстал, готов передать весь опыт вам. Поработав с сотнями проектов, научился выкручиваться даже из самых безнадёжных ситуаций. Помогу освоить вёрстку, чтобы она перестала казаться чем-то страшным.

Впечатления

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

Lenri Rodionova 06 мая 2020

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

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

Roman Serikov 05 ноября 2019

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