FLEXBOX. Учимся верстать на флексах. Мини-курс по FLEXBOX
Flexbox (или просто flex) — это способ позиционирования элементов в CSS. С помощью этой функции можно быстро и легко описывать, как будет располагаться тот или иной блок на веб-странице. Элементы выстраиваются по заданной оси и автоматически распределяются согласно настройкам.
Ссылка на шпаргалку с урока:
https://html5.by/blog/flexbox/
Ссылка на стартовый код для практики:
https://drive.google.com/file/d/1UyIf...
Игра - Flexbox Froggy: https://flexboxfroggy.com/#ru
Тайм коды:
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"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: http://webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Хочешь стать Frontend разработчиком и изучить JavaScript + React ?
Советую посмотреть информацию по ссылке ниже:
https://webcademy.ru/jscourse/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Также будем рады видеть вас в наших сообществах:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Вконтакте: https://vk.com/web__skills
Telegram канал: https://t.me/web_skills
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Смотрите видео FLEXBOX. Учимся верстать на флексах. Мини-курс по FLEXBOX онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Web Skills 20 Июль 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 166 раз и оно понравилось 9 людям.