FLEXBOX. Учимся верстать на флексах. Мини-курс по FLEXBOX

Flexbox (или просто flex) — это способ позиционирования элементов в CSS. С помощью этой функции можно быстро и легко описывать, как будет располагаться тот или иной блок на веб-странице. Элементы выстраиваются по заданной оси и автоматически распределяются согласно настройкам.

Ссылка на шпаргалку с урока:

Ссылка на стартовый код для практики:

Тайм коды:

00:00:00 - Flex-direction – Направление главной оси.
00:10:11 - Justify-content. Определяем, как будут выровнены элементы вдоль главной оси.
00:18:00 - Align-items. Определяем, как будут выровнены элементы вдоль поперечной оси.
00:25:30 - Align-items: baseline. Выравниваем блоки по их базовой линии.
00:30:30 - Flex-wrap. Определяет, будет ли flex-контейнер в несколько рядов или колонок.
00:35:50 - Flex-flow. Заменяет свойства Flex-direction и Flex-wrap.
00:38:20 - Align-content. Выравниваем ряды блоков по вертикали.
00:44:30 - Flexbox. Align-self. Выравнивание отдельно взятого flex-блока по поперечной оси.
00:48:20 - Margin:auto; Работает и для вертикали!
00:52:20 - Flex-basis. Базовый размер отдельно взятого flex-блока.
00:57:40 - Flex-grow. Жадность отдельно взятого flex-блока.
01:02:05 - Flex-shrink. Фактор сжимаемости отдельно взятого flex-блока.
01:06:30 - Flex. Короткая форма записи для свойств: flex-grow, flex-shrink и flex-basis.
01:09:05 - Order. Порядок следования отдельно взятого flex-блока внутри flex-контейнера.
01:15:20 - Flexbox. CSS игра "Flexbox Froggy". Закрепляем теорию на практике.

Если есть вопросы, пишите, я с радостью на них отвечу.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Хочешь стать Frontend разработчиком и изучить JavaScript + React ?
Советую посмотреть информацию по ссылке ниже:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Также будем рады видеть вас в наших сообществах:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::