FLEXBOX. Всё о flexbox в одном уроке

Привет!📢

В этом уроке я расскажу вам о 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

НЕ СОМНЕВАЙТЕСЬ И РАЗВИВАЙТЕСЬ! У ВАС ВСЁ ПОЛУЧИТСЯ! :)
Желаю приятного обучения! 🔥

📢 Автор видеоурока: Дмитрий Колотильщиков
#html #верстка #flexbox

[dmitry_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

[gerompauel]

Годная инфа! Отдельное спасибо за таймкоды!

[fresh_wind]

Блин, спасибо, а то умники непонятным языком статьи пишут, умничают заумными словами, но ничего не понятно. А благодаря тебе понял отличие flex и inline-flex . Ты великий человек, спасибо, спасибо, спасибо!!!

[ainti]

4:25 Flex контейнер становится именно Flex контейнером только после того, как у него появится свойство display: flex; И тогда же его дочерние блоки станут flex элементами. На этот момент это просто родительский div. Думаю лучше так описывать изначальную структуру.
4:45 элемент не станет строчным. Просто все flex элементы выстроятся в строку. Но они БЛОЧНЫЕ.
5:00 inline-flex вот тут правильно и как раз противоречит 4:47
Если это рассчитано на новичков- надо точнее с определениями. Но за контент +++

[zwmpfdd]

Спасибо Дмитрий, очень доступно объясняете, все наглядно и доходчиво! Можете сделать обзор как делать адаптивные картинки?

[pavelzaytsev_moscow]

Спасибо, что делитесь профессиональным опытом! Материал изложен отлично, легко усваивается. Однозначно Like и Подписка. Рекомендую всем сделать также!

[mychanel]

Спасибо за урок! Все интересно, просто, доступно и понятно! 👍

[overwox]

Отлично! Коротко и только по делу. Лайк и подписка, однозначно.

[cxyhmoh]

Отличный очень полезный видос. все четко без воды. зря забросил канал.

[alexanderalentyev]

Когда человек сам понимает о чем говорит, и, при этом может доступно объяснить другим - это супер! Но есть вопросы и просьба. В видео при подключении стилей появляется тег link, и в следующий момент строка закончена! Поясните пожалуйста фокус. Очень быстрое копирование в видео, кроме того, очень быстро появились подключенные шрифты. Понятно, что где-то EMMET сработал, а где-то навык. Просьба моя в следующем: хотелось бы такое же доступное для понимания видео о VS Code. Какие плагины для верстки используете Вы, какие плюшки EMMET применяете лично Вы в работе? Также интересно узнать о свойстве overflow: hidden. Оно разве не устарело вместе с float? Интересно Ваше мнение! И еще. При подключении стилей разве не нужно прописывать type="text/css" ??? СПАСИБО!

[EnriqueParkeer]

А для чего нужна обёртка "wrapper", я вот всегда смотрю видео у кого либо, и все оборачивают контент во всякие обёртки, обьясни пожалуйста для чего это нужно?

[jvuwbdv]

Привет, пишу в webStorm, некоторые команды не работают ( например align-self (работает только align-items)
Flex-grow тоже почему-то не работает...печаль.

[AntonioBenderas]

align-items, align-self есть, а align-content?

[denzeroneYT]

А для чего может быть полезно запрещать сужение елементов?

[denzeroneYT]

Замечал что классы пишут так "flex__element" или "child_1", почему?

[mishachubenko]

Скачаю, погляжу, потом людям расскажу, иль на сайте покажу !!!

[andynaz]

всё как-то бестолково, а хвалебные отзывы - от лохов