В данном видеокурсе мы рассмотрим с вами css модуль Flexbox, изучив который вы сможете верстать гибкие макеты различной сложности, при этом не используя float и inline-block.
Понятия Flex контейнера, элемента и расположения осей
С данного урока мы начинаем изучение css модуля Flexbox, в котором ознакомимся со структурой проекта, основными понятиями flex контейнера, flex элементов и расположением осей flex контейнера.
Изменение направления осей, перенос элементов, выравнивание
В этом уроке мы приступим к изучению свойств, которые задаются для flex контейнера, а именно: flex-wrap, flex-direction и justfy-content.
Выравнивание элементов по поперечной оси
В этом видео мы изучим часть свойств, которые применимы для flex контейнера (align-items, align-content), а также рассмотрим свойства, принадлежащие flex элементам (align-self, order, margin: auto).
Управление размерами flex элемента
В текущем уроке мы изучим еще несколько новых свойств, которые позволяют управлять размером flex элемента, а именно: flex-basis, flex-grow и flex-shrink.
Расчет размеров flex элемента
В данном видео я расскажу, каким образом можно рассчитывать размеры flex элементов при использовании свойств flex-grow и flex-shrink, после чего мы затронем тему поддержки flexbox.
Верстка макет на Flex. Создание структуры html
Начиная с данного макета мы с вами попрактикуемся и применим полученные знания по flex для верстки реального макета. В этом уроке мы рассмотрим psd макет, который будем верстать при помощи flexbox, а также создадим html структуру данного макета.
Верстка макет на Flex. Стилизация макета
В прошлом уроке мы с вами рассмотрели PSD макет и создали HTML разметку для его верстки. Нам осталось стилизовать макет, назначить для него стили и оформить его элементы так, как того требует исходный макет. Мы полностью напишем необходимые css стили и получим готовую верстку psd макета, при этом по максимуму используем изученные возможности flexbox.
Автор: webformyself
