FLEXBOX. Всё о flexbox в одном уроке
HTML-код
- Опубликовано: 5 авг 2024
- Привет!📢
В этом уроке я расскажу вам о FLEXBOX. Всё о flexbox в одном уроке.
FLEXBOX - это Css свойство, это способ компоновки элементов.
Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.
Модуль flexbox позволяет решать следующие задачи:
▶ Переопределять порядок отображения элементов.
▶ Автоматически определять размеры элементов таким образом, чтобы они вписывались в доступное пространство.
▶ Решать проблему с горизонтальным и вертикальным центрированием.
▶ Переносить элементы внутри контейнера, не допуская его переполнения.
▶ Создавать колонки одинаковой высоты и др.
Таймкоды:
00:00 - Вступление
00:36 - Flexbox - что это?
01:26 - Начало работы
02:16 - Создание разметки и стилей
04:46 - Display: flex
05:40 - Display: inline-flex
06:33 - Justify-content
08:35 - Align-items
09:47 - Flex-wrap
10:54 - Flex-direction
11:44 - Flex-flow
13:09 - Flex elements. Order
14:43 - Flex-basis
15:57 - Align-self
16:44 - Flex-grow
18:01 - Flex-shrink
18:47 - Flex
20:32 - Добавление элементов
22:20 - Outro
НЕ СОМНЕВАЙТЕСЬ И РАЗВИВАЙТЕСЬ! У ВАС ВСЁ ПОЛУЧИТСЯ! :)
Желаю приятного обучения! 🔥
▶ Телеграм: t.me/Dmitry_Kolotilshikov
▶ Мой канал по видеомонтажу: / dmitrykolotilshikov
📢 Автор видеоурока: Дмитрий Колотильщиков
#html #верстка #flexbox
![Налог на незнание JavaScript - [Hamster Kombat]](/img/1.gif)
▶ Telegram: t.me/dm_kolotilshikov
Таймкоды:
00:00 - Вступление
00:36 - Flexbox - что это?
01:26 - Начало работы
02:16 - Создание разметки и стилей
04:46 - Display: flex
05:40 - Display: inline-flex
06:33 - Justify-content
08:35 - Align-items
09:47 - Flex-wrap
10:54 - Flex-direction
11:44 - Flex-flow
13:09 - Flex elements. Order
14:43 - Flex-basis
15:57 - Align-self
16:44 - Flex-grow
18:01 - Flex-shrink
18:47 - Flex
20:32 - Добавление элементов
22:20 - Outro
супер!продолжай!оч понравилось
Красава!! Зверь!___)))
Блин, спасибо , а то умники непонятным языком статьи пишут , умничают заумными словами, но ничего не понятно. А благодаря тебе понял отличие flex и inline-flex . Ты великий человек, спасибо, спасибо, спасибо!!!
Годная инфа! Отдельное спасибо за таймкоды!
Спасибо за урок! Все интересно, просто, доступно и понятно! 👍
Спасибо Дмитрий, очень доступно объясняете, все наглядно и доходчиво! Можете сделать обзор как делать адаптивные картинки?
4:25 Flex контейнер становится именно Flex контейнером только после того, как у него появится свойство display: flex; И тогда же его дочерние блоки станут flex элементами. На этот момент это просто родительский div. Думаю лучше так описывать изначальную структуру.
4:45 элемент не станет строчным. Просто все flex элементы выстроятся в строку. Но они БЛОЧНЫЕ.
5:00 inline-flex вот тут правильно и как раз противоречит 4:47
Если это рассчитано на новичков- надо точнее с определениями. Но за контент +++
Спасибо, что делитесь профессиональным опытом! Материал изложен отлично, легко усваивается. Однозначно Like и Подписка. Рекомендую всем сделать также!
Отличное видео. Спасибо.
Класс. Спасибо за ролик!
Круто объясняешь! Благодарю!
Годно, четко объяснил
Отлично! Коротко и только по делу. Лайк и подписка, однозначно.
спасибо, приятного обучения!)
Отлично!
Супер
Очень толково
Спосибо
Отличный очень полезный видос. все четко без воды. зря забросил канал.
Брат спасибо огромное 💪
👍
Клас🔥🔥🔥
Когда человек сам понимает о чем говорит, и, при этом может доступно объяснить другим - это супер! Но есть вопросы и просьба. В видео при подключении стилей появляется тег link, и в следующий момент строка закончена! Поясните пожалуйста фокус. Очень быстрое копирование в видео, кроме того, очень быстро появились подключенные шрифты. Понятно, что где-то EMMET сработал, а где-то навык. Просьба моя в следующем: хотелось бы такое же доступное для понимания видео о VS Code. Какие плагины для верстки используете Вы, какие плюшки EMMET применяете лично Вы в работе? Также интересно узнать о свойстве overflow: hidden. Оно разве не устарело вместе с float? Интересно Ваше мнение! И еще. При подключении стилей разве не нужно прописывать type="text/css" ??? СПАСИБО!
Спасибо за обратную связь, overflow hidden активно используется
А для чего нужна обёртка "wrapper", я вот всегда смотрю видео у кого либо, и все оборачивают контент во всякие обёртки, обьясни пожалуйста для чего это нужно?
Wrapper всего лишь контейнер для удобства, заключая блоки в обертку проще центрировать, задавать общую ширину..... и т.д.
Также это связано с position: absolute для вложенного элемента. Координаты вложенного элемента без обёртки (wrapper) с position: relative будут отсчитываться относительно всего документа, а с обёрткой - относительно обёрточного элемента.
align-items, align-self есть, а align-content?
Привет, пишу в webStorm, некоторые команды не работают ( например align-self (работает только align-items)
Flex-grow тоже почему-то не работает...печаль.
Привет, от IDE это совершенно не зависит)
А для чего может быть полезно запрещать сужение елементов?
Что элементы например могли переносится на новые строки при недостатке места в контейнере для нескольких элементов. Или если по тз сужать элементы не нужно, или чтобы сохранить место на страницы, чтобы остальные элементы не смещались
+
Замечал что классы пишут так "flex__element" или "child_1", почему?
Это БЭМ методология
Сказка...
Скачаю , погляжу, потом людям расскажу, иль на сайте покажу !!!
всё как-то бестолково, а хвалебные отзывы - от лохов
от лохов ахахах, ару, объясни, где он был не прав, учитель?