Курс по Flexbox.Введение 2018
В данном видеокурсе мы рассмотрим с вами css модуль Flexbox, изучив который вы сможете верстать гибкие макеты различной сложности, при этом не используя float и inline-block.
На протяжении курса будут изучены все основные свойства, которые нам предоставляет Flexbox, а также мы разберем различные тонкости, благодаря которым вам будет проще понимать, как работает данный модуль.
Если вы имеете какие-то начальные знания в области верстки, то это будет плюсом при прохождении курса, однако и новички могут осваивать данную технологию абсолютно с нуля.
В каждом уроке будет разбираться не только теория, а также приводятся примеры, касающиеся изучаемых css свойств Flexbox.
После прохождения теории мы сверстаем макет с чистого листа, начиная от написания структуры html и заканчивая css стилями, где применим полученные знания на практике.


Урок 1. Курс по Flexbox. Понятия Flex-контейнера, элемента и расположения осей:
От автора: с данного урока мы начинаем изучение css модуля Flexbox, в котором ознакомимся со структурой проекта, основными понятиями flex контейнера, flex элементов и расположением осей flex контейнера.
По результатам урока вы будете понимать, как создать flex контейнер и что является flex элементами внутри данного контейнера, а также как располагаются элементы внутри контейнера по умолчанию.


Урок 2. Курс по Flexbox. Изменение направления осей, перенос элементов, выравнивание:
От автора: в этом уроке мы приступим к изучению свойств, которые задаются для flex контейнера, а именно: flex-wrap, flex-direction и justfy-content.
По результатам урока вы научитесь менять направление осей, переносить flex элементы на новый ряд если им не хватает места внутри flex контейнера, а также распределять элементы вдоль главной оси.


Урок 3. Курс по Flexbox. Выравнивание элементов по поперечной оси:
От автора: в этом видео мы изучим часть свойств, которые применимы для flex контейнера (align-items, align-content), а также рассмотрим свойства, принадлежащие flex элементам (align-self, order, margin: auto).
По результатам урока вы научитесь распределять элементы вдоль поперечной оси, поймете отличие свойств align-items от align-content. Сможете выравнивать определенные элементы по поперечной оси, менять их порядок при этом не изменяя структуры html, а также узнаете как работает свойство margin при значении auto.


Урок 4. Курс по Flexbox. Управление размерами flex элемента:
От автора: в текущем уроке мы изучим еще несколько новых свойств, которые позволяют управлять размером flex элемента, а именно: flex-basis, flex-grow и flex-shrink.
По результатам урока вы узнаете отличия flex-basis от width и height, поймете, как заставить флекс элемент занимать всю доступную ширину внутри флекс контейнера или запретить flex элементу ужиматься, а также будете разбираться как взаимодействуют flex-basis, flex-grow и flex-shrink при их совместном использовании.


Урок 5. Курс по Flexbox. Расчет размеров flex-элемента:
От автора: в данном видео я расскажу, каким образом можно рассчитывать размеры flex элементов при использовании свойств flex-grow и flex-shrink, после чего мы затронем тему поддержки flexbox.
По результатам урока, вы сумеете рассчитывать итоговую ширину flex элементов, при использовании flex-grow и flex-shrink, и узнаете о поддержке Flexbox в настоящее время.


Урок 6. Курс по Flexbox. Вёрстка макет на Flex. Создание структуры html:
От автора: начиная с данного макета мы с вами попрактикуемся и применим полученные знания по flex для верстки реального макета. В этом уроке мы рассмотрим psd макет, который будем верстать при помощи flexbox, а также создадим html структуру данного макета.
По результатам урока вы будете иметь полную html структуру, созданную по psd макету, для которой останется лишь применить необходимые css стили.


Урок 7. Курс по Flexbox. Вёрстка макет на Flex. Стилизация макета:
От автора: в прошлом уроке мы с вами рассмотрели PSD макет и создали HTML разметку для его верстки. Нам осталось стилизовать макет, назначить для него стили и оформить его элементы так, как того требует исходный макет. Мы полностью напишем необходимые css стили и получим готовую верстку psd макета, при этом по максимуму используем изученные возможности flexbox.
По результатам урока вы еще больше закрепите свои знания, получите первый опыт верстки на flexbox и в дальнейшем сможете верстать свои собственные макеты, используя данную технологию.