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
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Watch video FLEXBOX. Учимся верстать на флексах. Мини-курс по FLEXBOX online without registration, duration hours minute second in high quality. This video was added by user Web Skills 20 July 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 166 once and liked it 9 people.