flex-basis, flex-grow, flex-shrink. flexbox погружение

[@flashback8504]

Это лучший канал по вёрстке! Тупо как кофе пьешь и кайфуешь, самое топовое , что Вадим объясняет прям простыми словами , прям вот клянусь красава 💪🤝🔥! Спасибо Вадим за всё, всем советую твою канал! Здоровья тебе ✊

[@vadymprokopchuk]

Благодарю

[@ВалерийКостюков-с9ж]

@@vadymprokopchuk Gf

[@Green_Alex]

Простой как чашка кофе

[@bruhmoment5935]

Не по уведомлению, а по зову сердца, приятно снова вас видеть!

[@vadymprokopchuk]

Благодарю)

[@666Vladyka911]

Відео не тільки корисне, а й максимально позитивне.)) В цей непростий час, це як ковток свіжого повітря)) Дяки!)))

[@vadymprokopchuk]

Дякую

[@sviatbondar1721]

Я чекав цю тему як манну небесну, дякую наперед навіть ще не подивився а вже вподобайка)) А вот за пояснення ,що ж таке Flex-basis окреме величезне дякую. Я думав що це просто замість width.

[@vadymprokopchuk]

круто, дякую, радий що допоміг

[@ДмитрийКоровин-в8э]

Спасибо, Вадим🙏 То что нужно было👍 Так рад каждый раз слышать тебя. Мира твоей семье и всем людям🙏

[@vadymprokopchuk]

спасибо

[@Andrii_N-o8c]

Спасибо за материал, хорошая подача, легко и с юмором 👍. То чего многим блогерам не хватает. Также рекомендация по flexbox играм: жабки по началу весёлые без спору, но вот Flexbox Zombies - уровень поинтересней будет, больше практики и лучше "навык" отточит (там также есть игры по grid-ам и другие).

[@isaabazov3700]

1:15 - начало 3:32 - flex-grow 16:10 flex-shrink 24:30 flex-basis

[@shadowveter]

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

[@vadymprokopchuk]

спасибо

[@максим-м9ж5э]

спасибо, я всё понял . учить верстке это прям твое . совсем не скучно и при этом информативно , респект .

[@RomanKhassazhirov]

дядька, поклон!

[@vadymprokopchuk]

спасибо

[@irinadim]

Кручее и злитым- это просто шедевр))) Вадим, спасибо за контент с юмором!!!

[@ЖизньКисунделя]

Прислюнявим))) Прикольно ведете контент, Вадим! Но вообще хорошо объясняете, спасибо вам огромное!

[@АлексАнтон-л8ч]

Привет Вадим, рад что ты вернулся!

[@life.boomerang]

Salam Aleykum из Баку! -Спасибо большое за ваши видеоуроки ! Всё понятно ,всё четко ... Приятно слушать ! Дай Бог крепкого здоровья вам и вашим близким !!!

[@AmirLT-x6y]

Мне очень нравится твое преподавание: интересно, образно, с юмором. Flex былa очень сложной темой. Спасибо

[@AmirLT-x6y]

flex-basis это такая бомба 💣💣💣💣 такого подробного учения я еще не слышал и не видел.

[@user-rz1234]

Очень соскучилась по вашим стримам. Спасибо за ваши видео)

[@DaymerJun]

Спасибо большое за видео. Это третье видео которое смотрю на эту тему. Подача супер, шутки тоже очень смешные. Продолжайте это дело обязательно) Всё очень даже не сложно, чтобы обобщать эти флексы, как делают это в интернете...

[@vadymprokopchuk]

спасибо, я рад )

[@АняЕфимук]

Нравятся сравнения с маршруткой)Объяснение очень просто в понимании и не скучно смотреть) Спасибо!

[@vadymprokopchuk]

спасибо

[@perfecto9592]

кэф трения... улыбнуло =) Спасибо за твой труд!!! Берегите себя!!!

[@ivasik4044]

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

[@DragonDrugOn]

Вадос, спасибо! Продолжаем работу!

[@AntonioBenderas]

Вадим, безмерная благодарность за полезные, эффективные и позитивные уроки. Огромная просьба распихать их по возможности по плейлистам, так намного удобней искать на канале нужное

[@vadymprokopchuk]

да, спасибо, нужно єто сделать

[@naphania2]

это конечно классная тема, спасибо! но вот еще бы разобраться с position: ... они летят куда хотят. порядок если навести, было бы агонь в будущих видосах

[@andreykrav3274]

Потом Грибы, а потом Реакт и Редакс )) Классные видосы, главное не останавливайся!

[@vadymprokopchuk]

обязательно

[@ВикторБукин-у3м]

Вадим, это лайк) Классный ты мужик!

[@rostyslavkinash5232]

Вадим, спасибо за урок. Ждём видео про грид сетку.

[@ana.stasia.w]

Вадим, а по js нет планов делать видео? Вы просто суперски объясняете

[@Edgar-pu1lc]

Большое спасибо за уроки, благодаря вам многие не тратят деньги на платные курсы )

[@ТатьянаГунтик]

Спасибо огромное за работу и уроки! мира и добра всем нам)

[@revolver4153]

Пересмотрел очень многих топовых и известных специалистов по вёрстке, и когда нашёл Вадима, то понял, что лучше канала я не найду!

[@vadymprokopchuk]

спасибо

[@CTpeJloK_]

Вадос, ты как всегда на высоте.

[@Liverpoolfc_1892]

Спасибо , Вадим большое!

[@uglykaneki5165]

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

[@ja-prodaction]

Ты лучший) спасибо большое за видео!)

[@tatianaagapkina8658]

Видос, ответивший на многие мои вопросы. На днях мучалась, делала таблицу на флексах, и вот теперь дошло, что flex-grow и flex-shrink совсем не по назначению использовала. А flex-basis, кстати, правильно, я молодец. Дайте сюда слюнявого эксперта, я ему объясню, что флекс-бейзис - ширина флекс элемента вдоль ГЛАВНОЙ оси 😉

[@myroadmalankajosef9192]

Ти молодчина! Просто чудо!!!

[@СветланаГангардт-ц2й]

Вадим, главное, что ты смеешься! Прекрасные шутки! Учу очередную тему и улыбаюсь очень громко.

[@vadymprokopchuk]

спасибо

[@Nemerezzz]

спасибо большое!. Я вроде и понимал и не понимал, но теперь все ясно как день)

[@mmosow]

Ура!!!!! наконец то ВЕЧЕРИНКА!!!!

[@АлмазХусеинов-э9з]

ты просто супер, пасиба за видос, было угарно и познавательно

[@Goodday-b6k]

Спасибо за крутой видос! Как всегда на высоте!))

[@Blondguy12]

Отличные видосы про флексам! Единственное что не упомянул, так это gap во флексах, ведь ими можно задавать конкретные расстояния между элементами, но та пофиг)

[@romanr5962]

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

[@MelkoR4111]

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

[@AntonioBenderas]

@@MelkoR4111 #ищисвоих

[@максим-м9ж5э]

@@MelkoR4111 типо белорусская расса

[@СтаниславГорячев-г1ъ]

Спасибо, супер понятно, красава 🤝

[@xu2593]

дякую! приятно было смотреть, хочется продолжать изучение, это невероятная подача, спасибо!

[@vadymprokopchuk]

Благодарю

[@sviatoZavr]

Спасибо. Ты не просто учишь ты вдохновляешь

[@vadymprokopchuk]

Благодарю

[@ЭстетичнаяМузыка-г2ъ]

Очень круто объяснил! Дальше только практиковаться!

[@Oleg_Artemov]

Большое спасибо за урок !

[@stillchristine9046]

Спасибо, это было чудесно и очень интересно! Игра с лягушатами -- милота =)) C удовольствием буду посещать данный канал, чтобы узнать что-то новенькое 😊

[@АндрейСпичак-ь4б]

Лайк не глядя! Хотя, конечно же, посмотрю. Вадим, спасибо тебе огромное, что продолжаешь пилить видосы в это нелёгкое время! С твоего первого курса обучился вёрстке ещё летом 2019, потом уже без тебя JS (ждали от тебя, но недождались), сейчас работаю разработчиком на nuxtjs, но и там без вёрстки никуда! Ты на мак перешёл?)

[@vadymprokopchuk]

круто, молодцом, мак с 19 года, я с ним когда не могу за своим компом работать

[@romanprokopets3693]

топ юмор, топ контент) спасибо)

[@infodniester]

Привет Вадим, рад слышать тебя и то что ты продолжаешь тему по верстке! Хочу выразить свою благодарность по поводу своего обучению в вашем онлайн курсе Верстка 1.0. Спасибо огромное!!! Желаю ВАМ Мира, здоровья и счастья ! С уважением ваш ученик Олег из Молдовы!

[@esp2644]

Вот бы увидеть контент, как нужно из Фотошопа, да и вобще полный курс по декорациям svg на заднем фоне с паралоксом, адаптивом и т.д, анимациями.

[@bekzodkholdarovmirzakarim]

Классно! Продолжай! Твой контент очень информативный. Спасибо! Flexbox, flex-grow, flex-shrink, flex-basis ✊👍⚡

[@petrovpetrov6095]

Спасибо за знания!стал учить верстку на этом канале сейчас учу js

[@makakasukraini]

как я примерно запомнил это все: flex-grow считается как: Находим сумму всех коэффициентов (flex: 1, flex: 2 и т.д). Далее берем отдельный элемент, например с flex-grow: 2 и считаем, как разность между коэффициентом растяжения этого элемента и общей суммой всех коэффициентов. И умножаем это все на свободное пространство, так мы получаем размер этого элемента с учетом flex-grow. С шринк такая же формула, но уже вместо свободной ширины используем оставшуюся после сужения ширину родительского контейнера. После подсчетов получим то, что нужно отнять от ширины родительского контейнера. эти формулы в целом безполезны, но если много гровов и шринков с 2 3 2 1 3 и так далее, то может помочь

[@baton4iki]

О,спасибо)

[@awesomexe]

улыбают твои шутки)

[@drknss3021]

Вадим, ты очень добрый и светлый человек. От тебя исходит позитивная энергетика, не смотря на весь ужас, который происходит в твоей стране😢 P.S с флексами разобрался, очень упрощают жизнь, а вот с гридами не могу. Даже циклы в JS дались проще. Может, потому что я пытаюсь микросетку построить на гридах, а следовало использовать флекс? Если кто знает, напишите, пожалуйста!

[@4sARy]

Лучше не напоминать человеку о происходящем, оставьте это для других блоггеров. Он отличился своим целомудрием и адекватностью к происходящему. По крайней мере, он просто продолжил делать то, что он делал. За это ему большое человеческое спасибо!

[@Anahitacode]

Вадим, спасибо! Просто замечательные уроки. Было бы здорово, если была ссылка на донаты.

[@vadymprokopchuk]

та как-то сделаю, забываю)

[@Eu-Vorobieu]

Вадос, чего решил мак прикупить?) Вроде на винде до этого был. Как оно, разница чувствуется?

[@vadymprokopchuk]

мак с 19 года, видео на винде писал, мак в поездках юзал

[@veronnah23]

29:52 ширина должна стать типа как бы высотой, если ты адекватный человек ))) улыбнуло, спасибо за полезный материал👍

[@АннаДанилова-к5ж]

Лучший учител 🤓❤️

[@kovalskine1740]

👍👍👍👍 Спасибо!!!

[@Blondguy12]

Спасибо за видео! Будут еще видео по флексам из этой серии?

[@vadymprokopchuk]

та вроде уже все есть

[@Blondguy12]

@@vadymprokopchuk а, окей, спасибо за контент Вадос

[@ZimaTimofey]

👍👍👍🔥🔥🔥

[@CTpeJloK_]

Жду не дождусь марафона ;)

[@Clever_Web-sites]

Спасибо, объяснил хорошо, а игра с жабками топ для тренировки.))

[@jugo-stream]

Та самая вечеринка которая оставила меня дома😜👍

[@Camonoto]

Вадим, подскажи пожалуйста, какой у тебя шрифт в VS Code. На маке он поприятнее, чем на винде.

[@vadymprokopchuk]

comic shanns

[@Aleksandr-w4e]

Топовый урок, обучился новым свойствам Применять их конечно не буду 😅

[@vadymprokopchuk]

))

[@Andrew-q5w]

Дякую. Було цікаво!

[@vadymprokopchuk]

дякую

[@vuejs1]

Запишы пожалуйста 1 раз верстку как ты работаешь, именно интересно посмотреть как работает спец, чтобы было понятно как это верстать быстро)

[@MelkoR4111]

ты шутишь? или не умеешь гуглить или на канал его зайти трудно?

[@KodiesOd]

Большое спасибо...

[@TheEtherr]

Если я правильно понял, мы изначально задаём флекс-элементам нужные нам ширины через флекс-бэзис. В случае, если мы хотим растянуть их на всю ширину главной оси контейнера (или высоту, если главная ось - column), то мы пишем каждому элементу одинаковый гроу. Если же нужны разные пропорции растяжения элементов, то эти пропорции вычисляются от оставшегося пустого места контейнера. Т.е. это пропорции именно РАСТЯЖЕНИЯ, а не пропорции занимаемых ширин элементов в контейнере по итогу этой операции. Я так понимаю, в случае верстки дизайнерского проекта вместо гроу или шринк лучше юзать обычный флекс-бэзис в медиазапросах, чем пытаться что-то вычислять))

[@vadymprokopchuk]

все верно, а по поводу адаптива зависит от макета

[@ajsluprochazkova4587]

скажите пожалуйста будет или есть видео про расширение экранов для мобильных айпадов и компов ? благодарю!

[@Diana-yv9et]

Спасибо!

[@philigranchik]

Спасибо большое за 4к!

[@N32-e1g]

иногда кажется что можно смотреть чисто ради твоей харизмы)

[@_pheax]

спасибо Вадос.

[@denisboyko264]

Дякую, тримаймось.

[@vadymprokopchuk]

тримаймось

[@ЮрийГорбунов-т2ш]

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

[@vadymprokopchuk]

спецом для тебя kzbin.info/www/bejne/a2nCcqSvpb2dfZY

[@AnatolyGradovoy]

клево! а что за мак такой большой?

[@vadymprokopchuk]

мак про 16 дюймов 2019 год

[@AnatolyGradovoy]

@@vadymprokopchuk гдето заплакала старая рязанька 3200...

[@Кибер-Жириновский]

👍👍👍

[@shake4970]

Мне кажется или Вадим похож на Джонни Деппа?

[@antonserhiyenka]

Теперь flex-grow - не работает без явного указания flex-basis, так что лучшим решением будет использовать flex: 1, где видимо при отсутствующем явном указании basic последний будет считаться за 0.

[@romanhassazhyrov5558]

Лучший, спасибо что ты с нами, твой ученик, который смог, но продолжает развиваться вместе с твоими видео! :)

[@silicontower0908]

как сделать такой же шрифт в vs code?

[@ukraine1514]

💪👍

[@IvanKeats-q3q]

мне бы такого наставника как Вадим ...

[@333_splash2]

а ориг статью забыл указать ? upd если,что то обьяснение из видоса это превод статьи которая вышла миллиард лет назад, даже примеры одинаковые

[@Dimasik86352]

"Я буковка, я знаю что мне нужно, так что отсекись😎"

[@N32-e1g]

ля если вырезать все шутки из всех твоих видео, можно написать отдельную книгу "CSS Анекдоты"

[@demen_vadym]

когда ширинка не застегивается - на этом моменте выпал

[@baytszy]

я буковка))) мне как бы побоку))

[@dimendroider7550]

Братан, как сам? Как все?? Живы здоровы???

[@vadymprokopchuk]

привет, все норм, недавно видео выпустил о всем об этом

[@КостяТерентьев-у7ъ]

Нужно отдельный курс про 1000 долларовые сайты без контента.

[@computercomputer3293]

Так что же, получается флекс грау бесполезен, потому что он не рабоиает с контентом?

[@WERWOLION]

Ширину флекс элементов не используют потому что она конфликтует с флексами и багует

[@dianadvoryak]

суперрррр!!!!!!