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

Привет! Сегодня разберем flex свойства, которые на первый взгляд очевидные, но когда начинаешь их применять, сидишь в шоке, что оно не работает, думаешь, это у них что-то не так, я то норм написал)) В общем разберем flex-grow, flex-shrink, flex-basis и будем их использовать верно и максимально точно.
Телеграм канал:
t.me/from0to1com
Подробнее про flex:
developer.mozilla.org/ru/docs...
Игра:
flexboxfroggy.com/#ru
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

[@flashback8504]

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

[@vadymprokopchuk]

Благодарю

[@user-cn6rx5ld2m]

@@vadymprokopchuk Gf

[@Green_Alex]

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

[@bruhmoment5935]

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

[@vadymprokopchuk]

Благодарю)

[@user-rz1234]

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

[@isaabazov3700]

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

[@user-se2qi3qq8n]

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

[@user-ni2wz9zs1v]

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

[@user-pf6jf9oz2t]

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

[@irinadim]

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

[@perfecto9592]

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

[@user-vr6jo8ei3s]

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

[@vadymprokopchuk]

спасибо

[@shadowveter]

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

[@vadymprokopchuk]

спасибо

[@DragonDrugOn]

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

[@Edgar-pu1lc]

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

[@AntonioBenderas]

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

[@vadymprokopchuk]

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

[@uglykaneki5165]

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

[@sviatbondar1721]

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

[@vadymprokopchuk]

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

[@user-st4tr4zx2c]

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

[@rostyslavkinash5232]

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

[@666Vladyka911]

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

[@vadymprokopchuk]

Дякую

[@javadzeynalov]

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

[@user-xw1zc9gq3j]

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

[@vadymprokopchuk]

спасибо

[@DaymerJun]

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

[@vadymprokopchuk]

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

[@ivasik4044]

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

[@user-qm9oc3mr8f]

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

[@user-pi6yt2ks9b]

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

[@user-nc8ww3zd6n]

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

[@vadymprokopchuk]

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

[@user-pw5ub5hq8q]

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

[@bekzoddeveloper5995]

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

[@user-ml6eg1cw5u]

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

[@J-Lany]

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

[@Liverpoolfc_1892]

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

[@rimavedeckiene2203]

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

[@rimavedeckiene2203]

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

[@Blondguy12]

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

[@petrovpetrov6095]

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

[@romanr5962]

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

[@MelkoR4111]

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

[@AntonioBenderas]

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

[@user-pf6jf9oz2t]

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

[@Nemerezzz]

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

[@stillchristine9046]

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

[@revolver4153]

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

[@vadymprokopchuk]

спасибо

[@andreykrav3274]

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

[@vadymprokopchuk]

обязательно

[@tatianaagapkina8658]

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

[@CTpeJloK_]

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

[@ana.stasia.w]

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

[@makakasukraini]

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

[@naphania2]

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

[@xu2593]

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

[@vadymprokopchuk]

Благодарю

[@CTpeJloK_]

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

[@user-kf4jz1gr7j]

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

[@Oleg_Artemov]

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

[@myroadmalankajosef9192]

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

[@RomanKhassazhirov]

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

[@vadymprokopchuk]

спасибо

[@user-lm9ee1gn5p]

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

[@Clever_Web-sites]

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

[@romanprokopets3693]

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

[@veronikaholubkina7797]

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

[@drknss3021]

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

[@4sARy]

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

[@baton4iki]

О,спасибо)

[@esp2644]

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

[@infodniester]

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

[@mmosow]

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

[@user-ef2wx9es1p]

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

[@vadymprokopchuk]

спасибо

[@Diana-yv9et]

Спасибо!

[@sviatoZavr]

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

[@vadymprokopchuk]

Благодарю

[@awesomedud]

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

[@_pheax]

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

[@user-wh9mc2po7g]

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

[@vadymprokopchuk]

))

[@grom5849]

Как всегда - самые лучшие вечеринки! Прошу только одну вещь: как зовут короля вечеринки в нижнем правом углу??

[@KoAndDi]

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

[@romanhassazhyrov5558]

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

[@jugo-stream]

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

[@ZimaTimofey]

👍👍👍🔥🔥🔥

[@user-zy4qf6dl6s]

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

[@Blondguy12]

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

[@vadymprokopchuk]

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

[@Blondguy12]

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

[@Anahitacode]

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

[@vadymprokopchuk]

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

[@kovalskine1740]

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

[@Dimasik86352]

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

[@AlbertBa]

Лайк не глядя

[@user-rs2wy5yj8r]

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

[@vadymprokopchuk]

дякую

[@user-md9ko2ty6f]

💯

[@denisboyko264]

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

[@vadymprokopchuk]

тримаймось

[@user-ul1fs9hs3q]

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

[@vadymprokopchuk]

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

[@ukraine1514]

💪👍

[@user-vj3cu3wv9l]

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

[@user-vp5hu8om9b5]

👍👍👍

[@user-zd4gz3so2y]

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

[@vadymprokopchuk]

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

[@demen_vadym]

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

[@ajsluprochazkova4587]

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

[@TheEtherr]

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

[@vadymprokopchuk]

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

[@Camonoto]

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

[@vadymprokopchuk]

comic shanns

[@vuejs1]

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

[@MelkoR4111]

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

[@dianadvoryak]

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

[@philigranchik]

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

[@user-dm7ww2gr6g]

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

[@user-xe4be7iq1q]

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

[@kalyonee4565]

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

[@AntonioBenderas]

_flex-basis: 100%_ должно нормально смотреться

[@user-vj3cu3wv9l]

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

[@baytszy]

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

[@AnatolyGradovoy]

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

[@vadymprokopchuk]

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

[@AnatolyGradovoy]

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

[@dimendroider7550]

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

[@vadymprokopchuk]

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

[@antonserhiyenka]

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