Flexbox CSS самый понятный и подробный урок для начинающих на практике

В этом уроке мы будем изучать CSS Flexbox. Рассмотрим все тонкости от А до Я, так что поймет абсолютно любой. Все максимально подробно, с огромным количеством наглядных примеров и в игровой форме, проходим все уровни игры Flexbox Froggy.

00:00:00 Вступление и краткий анонс
00:00:41 Что такое Flexbox и для чего он нужен (примеры и как мы будем изучать)
00:06:51 Выравнивание justify-content Уровень 1 на трех разных примерах
00:17:04 Инструменты разработчика Уровень 2-4
00:28:01 Выравнивание align-items Уровень 5-7
00:34:07 Направление главной оси flex-direction Уровень 8-13
00:51:28 Приоритет следования элементов order Уровень 14-15
00:59:57 Выравнивание align-self и сравнение с CSS Grid Уровень 16-17
01:05:13 Перенос на новые строки flex-wrap Уровень 18-19
01:14:41 Как сделать сетку 3*2 на Flexbox без CSS Grid Уровень 20
01:27:48 Расстояние между рядами align-content Уровень 21-24
01:36:09 План бесплатного обучения, Бонусы, ссылки, рекомендации, практика, flex-grow, flex-shrink, flex-basis, flex

#flexbox #cssflexbox #flexboxcss #itdoctor

[АкимеУсеинова-се]

Спасибо большое, отлично, всё понятно!!😊

[stanislavudcs]

Большое спасибо за урок, ждем подробный урок по GRID

[rikenbaker]

Спасибо за урок!
Подробно разобрали тему flexbox, картина сложилась 😀

[mathew]

Благодарю за прекрасный урок и разбор.

[АшурМезлан]

Автора канал, береги себя и дай бог тебе всех благ. ❤

[MikaStan]

Отлично! Были озвучены некоторые моменты, о которых я еще не знал)
И да, у Вас специалиста, уровень 24 Froggy получилось решить в 3 шага - когда как у меня вышло 4)):
flex-flow: column-reverse wrap-reverse;
align-items: flex-end;
align-content: space-between;
justify-content: center;

[ИгОрЁк-лз]

По flex-grow-shrink-basis можно сделать отдельное видео там есть о чем рассказать

[Js__voL_]

Прям с удовольствием смотрю ваши ролики. Вот хотелось бы посмотреть верстку где и флексы есть и плюс вместе с ними и позиционирование. Особенно на bootstrap хотелось бы все это увидеть…….👏👏👏👏👏

[Js__voL_]

4:23 тут хотелось бы очень чтобы ссылку бы вы прикрепили бы ))

[MikaStan]

А где озвученная ссылка в описании на справочник по Grid ?

[igoraleksandrovich]

С какого вашего курса сделано это объединённое видео?

[Chernayakniga]

justify-content:center;
flex-flow: wrap-reverse column-reverse;
align-content:space-between;
я таким решил, можно ли это считать за 4 действия, или все-таки 3?

[SerhiiBaranov]

Подскажи пожалуйста, когда в документе HTML добавлял класс, в документе CSS этот класс автоматом появился, за это отвечает какой-то плагин? Спасибо!

[МаксимНуралиев-фн]

Добрый день, вопрос беспокоит меня, купил курс ваш на Frontend разработчика прошёл html css и флекс бокс, в принципе понимаю что зачем и как, не скажу что прекрасно владею всем и тут вопрос стоит идти дальше JavaScript изучать или добивать предыдущие темы?

[Gazovchik]

2 часа - это только Начальный
-
Жёстко!

Сколько же надо знать более-менее профессионалу?!!

[АлександрАнисимов-оэ]

По сути в первые 15 минут уже решается большинство задач, которые когда-либо могут возникнуть

[demimurych]

Flex-ы это прежде всего понимание того, как работает grow shrink и basis.
В двух часовом видео, говориться о чем угодно, но не о том, что делает Flex флексами.

В конце видео уделяется на три фундаментальных свойства 15 минут, где по объяснению становится понятно, почему о них не говорили вообще - автор понятия не имеет как они работают. Потому, что grow - это не коэффициент пропорционального растягивания, а shrink это не пропорциональное сжатие.

На любом собеседовании, где спрашиваю о флексах, в первую очередь спросят именно это и если человек понимает КАК рассчитываются величениы flex элементов в зависимости от grow shrink basis никто у него уже выравнивания и прочее спрашивать не будет, потому, что выравнивания легко можно вспомнить по спецификации, а вот grow не вспомнишь. Их нужно понимать и знать как они работают.

Тем более flex-basis это не ширина контента как нам потребуется. Вы несете чушь и учите этому людей.
Стыдитесь.

[Beyond-the-transcendent]

Оч плохо, не говоря о затягивании.
Все эти уроки давно есть.

Сегодня реально для людей есть нужда в реальных примерах(не лягушки а макеты), потому что эта теория вообще не роляет.

Когда человек берёт работу и норм макет он совсем не понимает как применять флексы.
По самому важному свойству flex, нет тайминга что значит автор сам не пониемает религию флексов и решил просто пересказать тут доку.

Именно по этому один Евгений считает весь русский контент отребьем и он прав, уровень ниже плинтуса.

Вы можете внимательно изучить суть критики и подумать над рельным видео которое бы зашло и получить 500тыс просмотров, а можете обидется и плакать что кто-то пишет плохой коментарий.

Видео оч низкого качества по мат части и мне стыдно за русский контент.
Хотя я не отрицаю что сделать годное видео лень, т.к нужно потратить не меньше месяца.