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 канал:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
2 views
204
176
5 years ago 00:13:00 13
FLEXBOX. Всё о flexbox | Практика
8 years ago 01:01:12 243
Особенности Flexbox вёрстки
9 years ago 00:31:25 131
CSS FlexBox Essentials
3 years ago 00:05:56 21
TailwindCSS #6 Применение Flexbox (Using Flexbox)
6 years ago 00:27:42 70
Практическое изучение основ Flexbox. Использование flexbox. Верстка сайта на flexbox.
8 years ago 00:11:59 133
Flexbox CSS3 #2 — Свойства FlexBox
4 years ago 00:05:54 65
CSS Flexbox #8 Размеры элементов (Flexbox Sizing)
9 years ago 00:12:42 371
Flexbox CSS3 #1 — Знакомство с FlexBox
10 years ago 00:12:50 150
Flexbox CSS3 #3 — Свойства FlexBox
9 years ago 00:15:27 63
Flexbox CSS3 #6 — Flexbox на практике
8 years ago 00:28:10 42
Flexbox для Sketch App
9 years ago 00:08:10 38
CSS Flexbox Tutorial #8 - Creating Nested Menu’s with Flexbox
4 years ago 01:19:45 12
Изучение CSS - #9 FLEXBOX
4 years ago 00:09:02 10
Стили CSS | Positioning | Flexbox
8 years ago 00:25:36 20
Flexbox - полезные примеры
6 years ago 00:57:36 32
Изучаем CSS Flexbox. Полный урок.
5 years ago 00:03:30 25
flex direction css flexbox / Направление элементов в флексбокс / flexbox уроки