CSS Flexbox #10 Вложенность. Обёртка элементов с размерами (Nesting. Flex-basis & Flex-wrap)

#YauhenK #webDev #CSS #Flexbox
В данном видеокурсе мы с вами рассмотрим технологию Flexbox.
Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль основной и поперечной осей, или вертикально и горизонтально.
Технология позволяет буквально в пару свойств создать гибкий лэйаут, или гибкие UI элементы.
✒ Репозиторий курса:
✔ GitHub: github.com/Yau...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R...
✒ Автор курса:
✔ RUclips: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenK...
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/Yau...
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/Yau...

[@Taunfel]

Если мы, для всех элементов, используем flex-grow то, flex-basis, по сути, уже не нужен 💁‍♂

[@YauhenKavalchuk]

Верно

[@harrisonwinston2850]

После заключительного урока,могли бы записать практическую верстку на флексах?

[@YauhenKavalchuk]

Практическая вёрстка планируется отдельным курсом

[@Taunfel]

Почему 7 и 8 блоки растягиваются на всю высоту контейнера, ведь мы задали им значение flex-basis в 100px? 5:13

[@Taunfel]

Разобрался, это все из-за flex-grow

[@YauhenKavalchuk]

Хорошо что разобрались самостоятельно

[@КонорНурмагомедов-ч7к]

отличная подача материала, коротко, понятно и с наглядными примерами. спасибо!

[@YauhenKavalchuk]

Спасибо)

[@ki._leo_]

Почему 3 item не увеличился в пять раз по отношению с другими блоками где flex-grow: 1; ?

[@spicyeric9063]

Лучший учитель. Доходчиво объясняете! Отедельное уважение, за flex-items выкрашенные с помощью linear-gradient, выглядит приятно) Не знаю как так вышло, мой мозг когда хочет заниматься web разработке, сразу визуализирует образы именно ваши красивые items!! Читаю книгу "Веб-дизайн для начинающих. HTML, CSS, JavaScript и веб-графика", закрепляю на ваших видео. Благодарность, за титанический труд)

[@YauhenKavalchuk]

Спасибо большое за такой тёплый отзыв!

[@MAUZER696]

Отличный материал.
Подскажите - как задавать отступы между рядами перенесёнными на следующую строку, при использовании "Flex-wrap"?
Что бы они были не слипшимися.

[@YauhenKavalchuk]

Никак. Здесь нужно использовать или свойство gap, или индивидуальные отступы для каждого элемента

[@MAUZER696]

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

[@sunnlor3]

попробуйте свойство gap

[@Nikitosss91]

Как обычно, ультратопчанский

[@YauhenKavalchuk]

🤣 спасибо)

[@garikmelqonyan6011]

👍

[@YauhenKavalchuk]

👍

[@mxate5598]

чееетко

[@YauhenKavalchuk]

Спасибо

[@Nikita-qb3hu]

топ

[@YauhenKavalchuk]

☺️🤘