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 ? Советую посмотреть информацию по ссылке ниже: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Также будем рады видеть вас в наших сообществах: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Вконтакте: Telegram канал: ​ ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::