CSS Flexbox Layout. Флексы в CSS. Гайд по флексбокс.

✏️ На этом уроке разбираем тему флексбокс лейаута и все свойства, которые вам нужно знать: display: flex и inline-flex, flex-direction, flex-wrap, flex-flow, flex-grow, flex-shrink, flex-basis, flex, order, justify-content, align-items, align-content, gap, row-gap, column-gap.

🔴 Timeline:
▶ 00:00​ | План урока
▶ 00:18​ | Что такое флексбокс лейаут
▶ 01:09​ | Основные термины: флекс-контейнер, флекс-элемент, основная и побочная ось, размеры по осям
▶ 01:49​ | Флекс-контейнер (display flex и display inline-flex)
▶ 02:30​ | Направление осей флекс-контейнера (flex-direction)
▶ 03:49​ | Свойство flex-wrap
▶ 04:32​ | Свойство flex-flow
▶ 04:47​ | Свойство flex-grow
▶ 05:51​ | Свойство flex-shrink
▶ 06:37​ | Свойство flex-basis
▶ 07:33​ | Свойство flex
▶ 08:36​ | Свойство order
▶ 09:40​ | Свойство justify-content
▶ 11:48​ | Свойство align-items
▶ 13:04​ | Свойство align-items, значение baseline
▶ 13:47​ | Свойство align-content
▶ 14:59​ | Свойства gap, row-gap, column-gap
▶ 15:48​ | Игра FlexBoxFroggy
▶ 16:16​ | Что дальше

📚 Полезные ссылки:

💬 Чат в телеграмме (помощь новичкам):

🔸 Boosty (поддержать канал):

🗂️ Бесплатные курсы на канале:

📌 Автор:

#frontend #фронтенд #css

[ByTheWay]

Спасибо за полезную информацию и то, что видео не затягивается на два часа, очень сильно помогает такой подход подачи освежить данные.

[smotritelyoutube]

Очень полезный урок и главное всего 16 минут и все темы разобраны, автор говорит что урок длинный, если что другие уроки по флексам/гридам на ютубчике идут 1-2 часа, жесть просто, так что ставим лайки ребят, очень не хочется чтобы автор забросил такие уроки!!!

[rfzglcx]

Александр, спасибо большое Вам за образовательный курс и проделанную работу. Случайно наткнулся на Ваш канал и считаю, что это один из самых доступных и понятных курсов по HTML и CSS
Надеюсь, что в будущем Вы разберете и расскажите про a11y

[morismustanger]

Просто тебе человеческое спасибо за такие уроки

[polinapolunina]

Отличный курс)) за пару дней посмотрела и повторила все темы. Автор очень понятно объясняет и обращает внимание на важные моменты

[pherum]

Какой молодец. Без воды, нудятины и шепелявинья! Ну красавчик!!!

[Ivanfwit]

спасибо за видео!) flex-basis, flex-shrink, align-content тяжело даются эти свойства иногда)) приходится перебрать, чтобы подобрать то что нужно при верстке, а не сразу поставить нужное значение у свойства. если будут сложности обязательно к этому супер понятному видео буду возвращаться)

[idg]

Спасибо, хорошая работа! До твоего урока по этой теме, несколько смутно понимал Flexbox Layout, а после просмотра всё встало на свои места. Очень понравился FLEXBOX FROGGY. Благодаря уроку получилось пройти его с первого захода, а потом для закрепления материала ещё пару раз

[FlexonGordon]

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

[tcmlmuk]

Отличный Урок! Давай больше практики, пару макетов в месяц было бы отлично сверстать в прямом эфире.

[OlegNaumov-meyj]

Привет, начал изучать HTML CSS и смотрю твои курсы и уроки по версте, у тебя отличный курс, все четко и по делу, ничего лишнего, структурированно преподносишь информацию, приятный голос и хорошая дикция, с монтажом видео видно что тоже постарался, спасибо за годный курс)

[colodatwin]

You're the best teacher in the world) Thanks a lot for these lessons!
на 12:55, что значит учитывает направление языка? Не совсем понял

[phuntom]

Александр, огромное спасибо за столь подробный видео-урок! Подскажите, пожалуйста почему при изучении свойства justify-content при значении flex-direction:column для родительского контейнера была задана высота 700 px, а ранее при изучении свойства flex-direction:column вы не задавали никакое значение высоты?

[aLeKseU]

После просмотра возник вопрос. Свойство flex применяется только к элементам div? Или мы условно можем применять это свойство к элементам header или footer?

[doorjrv]

Когда уместно применять флекс, когда гриды ?

[neformal]

Почему нельзя сделать к каждому уроку конспекты? Это же просто перекопировать сценарий видео.

[danmaster]

Нам проще не нужно, кому нужно проще идут в армию. Нам нужно посложнее ☝