flex-basis, flex-grow, flex-shrink. flexbox погружение
HTML-код
- Опубликовано: 7 май 2022
- Привет! Сегодня разберем flex свойства, которые на первый взгляд очевидные, но когда начинаешь их применять, сидишь в шоке, что оно не работает, думаешь, это у них что-то не так, я то норм написал)) В общем разберем flex-grow, flex-shrink, flex-basis и будем их использовать верно и максимально точно.
Телеграм канал:
t.me/from0to1com
Подробнее про flex:
developer.mozilla.org/ru/docs...
Игра:
flexboxfroggy.com/#ru
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
![DRAGON BALL: Sparking! ZERO - Fused Warriors Trailer [BUDOKAI TENKAICHI Series]](http://i.ytimg.com/vi/84p4Lvyfyes/mqdefault.jpg)
![Kehlani - Next 2 U [Official Music Video]](http://i.ytimg.com/vi/MpI7ekFG8A0/mqdefault.jpg)
Это лучший канал по вёрстке! Тупо как кофе пьешь и кайфуешь, самое топовое , что Вадим объясняет прям простыми словами , прям вот клянусь красава 💪🤝🔥! Спасибо Вадим за всё, всем советую твою канал! Здоровья тебе ✊
Благодарю
@@vadymprokopchuk
Gf
Простой как чашка кофе
Не по уведомлению, а по зову сердца, приятно снова вас видеть!
Благодарю)
Відео не тільки корисне, а й максимально позитивне.)) В цей непростий час, це як ковток свіжого повітря)) Дяки!)))
Дякую
Я чекав цю тему як манну небесну, дякую наперед навіть ще не подивився а вже вподобайка)) А вот за пояснення ,що ж таке Flex-basis окреме величезне дякую. Я думав що це просто замість width.
круто, дякую, радий що допоміг
Очень соскучилась по вашим стримам. Спасибо за ваши видео)
Спасибо, Вадим🙏 То что нужно было👍 Так рад каждый раз слышать тебя. Мира твоей семье и всем людям🙏
спасибо
Нравятся сравнения с маршруткой)Объяснение очень просто в понимании и не скучно смотреть) Спасибо!
спасибо
кэф трения... улыбнуло =) Спасибо за твой труд!!! Берегите себя!!!
Спасибо огромное за работу и уроки! мира и добра всем нам)
спасибо, я всё понял . учить верстке это прям твое . совсем не скучно и при этом информативно , респект .
Мужик, спасибо тебе большое за контент особенно в текущей ситуации и что продолжаешь делать на русском ! Желаю твоим друзьям, близким и знакомым самого лучшего ! П.С. и вообще всем людям всего самого хорошего!
Плюсую! спасибо, что не становишься жутким расистом, как некоторые другие стримеры, и не меняешь язык, на котором вещаешь!
@@MelkoR4111 #ищисвоих
@@MelkoR4111 типо белорусская расса
Кручее и злитым- это просто шедевр))) Вадим, спасибо за контент с юмором!!!
Прислюнявим))) Прикольно ведете контент, Вадим! Но вообще хорошо объясняете, спасибо вам огромное!
Вадос, спасибо! Продолжаем работу!
спасибо автору, за внятное к тому же интересное объяснения. баланс шуток и кода отличный, так намного приятнее и легче усваивать материал. удачи в росте канала)
Большое спасибо за уроки, благодаря вам многие не тратят деньги на платные курсы )
Привет Вадим, рад что ты вернулся!
Хорош, продолжай не смотря ни на что, очень круто!
Ты лучший) спасибо большое за видео!)
Новый видос пушка!!!! Вадим просто разрывает всем кабины своим топовейшим контентом!!!! Продолжай и дальше радовать нас, лучшими выпусками, т.к. это для тебя, как минимум будет отвлечением от всех бед, а как максимум - позитив и благодарочка от нас
спасибо
Вадим, это лайк) Классный ты мужик!
Спасибо за материал, хорошая подача, легко и с юмором 👍. То чего многим блогерам не хватает.
Также рекомендация по flexbox играм:
жабки по началу весёлые без спору, но вот Flexbox Zombies - уровень поинтересней будет, больше практики и лучше "навык" отточит (там также есть игры по grid-ам и другие).
Спасибо за крутой видос! Как всегда на высоте!))
Мне очень нравится твое преподавание: интересно, образно, с юмором. Flex былa очень сложной темой. Спасибо
flex-basis это такая бомба 💣💣💣💣 такого подробного учения я еще не слышал и не видел.
1:15 - начало
3:32 - flex-grow
16:10 flex-shrink
24:30 flex-basis
Вадим, безмерная благодарность за полезные, эффективные и позитивные уроки. Огромная просьба распихать их по возможности по плейлистам, так намного удобней искать на канале нужное
да, спасибо, нужно єто сделать
Спасибо большое за видео.
Это третье видео которое смотрю на эту тему.
Подача супер, шутки тоже очень смешные.
Продолжайте это дело обязательно)
Всё очень даже не сложно, чтобы обобщать эти флексы, как делают это в интернете...
спасибо, я рад )
Вадим, спасибо за урок. Ждём видео про грид сетку.
Вадос, ты как всегда на высоте.
Salam Aleykum из Баку!
-Спасибо большое за ваши видеоуроки ! Всё понятно ,всё четко ... Приятно слушать ! Дай Бог крепкого здоровья вам и вашим близким !!!
Лайк не глядя! Хотя, конечно же, посмотрю. Вадим, спасибо тебе огромное, что продолжаешь пилить видосы в это нелёгкое время! С твоего первого курса обучился вёрстке ещё летом 2019, потом уже без тебя JS (ждали от тебя, но недождались), сейчас работаю разработчиком на nuxtjs, но и там без вёрстки никуда!
Ты на мак перешёл?)
круто, молодцом, мак с 19 года, я с ним когда не могу за своим компом работать
Спасибо, это было чудесно и очень интересно! Игра с лягушатами -- милота =)) C удовольствием буду посещать данный канал, чтобы узнать что-то новенькое 😊
Классно! Продолжай! Твой контент очень информативный. Спасибо!
Flexbox, flex-grow, flex-shrink, flex-basis ✊👍⚡
дядька, поклон!
спасибо
Спасибо , Вадим большое!
Потом Грибы, а потом Реакт и Редакс ))
Классные видосы, главное не останавливайся!
обязательно
Спасибо за знания!стал учить верстку на этом канале сейчас учу js
Большое спасибо за урок !
Очень круто объяснил! Дальше только практиковаться!
Спасибо. Ты не просто учишь ты вдохновляешь
Благодарю
ты просто супер, пасиба за видос, было угарно и познавательно
Вадим, главное, что ты смеешься! Прекрасные шутки! Учу очередную тему и улыбаюсь очень громко.
спасибо
спасибо большое!. Я вроде и понимал и не понимал, но теперь все ясно как день)
Ти молодчина! Просто чудо!!!
Отличные видосы про флексам! Единственное что не упомянул, так это gap во флексах, ведь ими можно задавать конкретные расстояния между элементами, но та пофиг)
Вадим, а по js нет планов делать видео? Вы просто суперски объясняете
дякую!
приятно было смотреть, хочется продолжать изучение, это невероятная подача, спасибо!
Благодарю
как я примерно запомнил это все:
flex-grow считается как: Находим сумму всех коэффициентов (flex: 1, flex: 2 и т.д). Далее берем отдельный элемент, например с flex-grow: 2 и считаем, как разность между коэффициентом растяжения этого элемента и общей суммой всех коэффициентов. И умножаем это все на свободное пространство, так мы получаем размер этого элемента с учетом flex-grow.
С шринк такая же формула, но уже вместо свободной ширины используем оставшуюся после сужения ширину родительского контейнера. После подсчетов получим то, что нужно отнять от ширины родительского контейнера.
эти формулы в целом безполезны, но если много гровов и шринков с 2 3 2 1 3 и так далее, то может помочь
топ юмор, топ контент) спасибо)
Спасибо, супер понятно, красава 🤝
Ура!!!!! наконец то ВЕЧЕРИНКА!!!!
Пересмотрел очень многих топовых и известных специалистов по вёрстке, и когда нашёл Вадима, то понял, что лучше канала я не найду!
спасибо
Видос, ответивший на многие мои вопросы. На днях мучалась, делала таблицу на флексах, и вот теперь дошло, что flex-grow и flex-shrink совсем не по назначению использовала. А flex-basis, кстати, правильно, я молодец. Дайте сюда слюнявого эксперта, я ему объясню, что флекс-бейзис - ширина флекс элемента вдоль ГЛАВНОЙ оси 😉
улыбают твои шутки)
Спасибо, объяснил хорошо, а игра с жабками топ для тренировки.))
Лучший учител 🤓❤️
29:52 ширина должна стать типа как бы высотой, если ты адекватный человек ))) улыбнуло, спасибо за полезный материал👍
Вадим, ты очень добрый и светлый человек. От тебя исходит позитивная энергетика, не смотря на весь ужас, который происходит в твоей стране😢
P.S с флексами разобрался, очень упрощают жизнь, а вот с гридами не могу. Даже циклы в JS дались проще. Может, потому что я пытаюсь микросетку построить на гридах, а следовало использовать флекс? Если кто знает, напишите, пожалуйста!
Лучше не напоминать человеку о происходящем, оставьте это для других блоггеров. Он отличился своим целомудрием и адекватностью к происходящему. По крайней мере, он просто продолжил делать то, что он делал. За это ему большое человеческое спасибо!
О,спасибо)
Лайк не глядя
это конечно классная тема, спасибо! но вот еще бы разобраться с position: ... они летят куда хотят. порядок если навести, было бы агонь в будущих видосах
Жду не дождусь марафона ;)
👍👍👍👍 Спасибо!!!
спасибо Вадос.
Спасибо!
Топовый урок, обучился новым свойствам
Применять их конечно не буду 😅
))
Спасибо за видео! Будут еще видео по флексам из этой серии?
та вроде уже все есть
@@vadymprokopchuk а, окей, спасибо за контент Вадос
Большое спасибо...
Та самая вечеринка которая оставила меня дома😜👍
Лучший, спасибо что ты с нами, твой ученик, который смог, но продолжает развиваться вместе с твоими видео! :)
👍👍👍🔥🔥🔥
Дякую. Було цікаво!
дякую
Привет Вадим, рад слышать тебя и то что ты продолжаешь тему по верстке! Хочу выразить свою благодарность по поводу своего обучению в вашем онлайн курсе Верстка 1.0. Спасибо огромное!!! Желаю ВАМ Мира, здоровья и счастья ! С уважением ваш ученик Олег из Молдовы!
Вадим, спасибо! Просто замечательные уроки. Было бы здорово, если была ссылка на донаты.
та как-то сделаю, забываю)
Как всегда - самые лучшие вечеринки! Прошу только одну вещь: как зовут короля вечеринки в нижнем правом углу??
Вадос, чего решил мак прикупить?) Вроде на винде до этого был. Как оно, разница чувствуется?
мак с 19 года, видео на винде писал, мак в поездках юзал
Вот бы увидеть контент, как нужно из Фотошопа, да и вобще полный курс по декорациям svg на заднем фоне с паралоксом, адаптивом и т.д, анимациями.
суперрррр!!!!!!
"Я буковка, я знаю что мне нужно, так что отсекись😎"
Вадим, подскажи пожалуйста, какой у тебя шрифт в VS Code. На маке он поприятнее, чем на винде.
comic shanns
👍👍👍
💪👍
💯
иногда кажется что можно смотреть чисто ради твоей харизмы)
скажите пожалуйста будет или есть видео про расширение экранов для мобильных айпадов и компов ? благодарю!
Дякую, тримаймось.
тримаймось
Если я правильно понял, мы изначально задаём флекс-элементам нужные нам ширины через флекс-бэзис. В случае, если мы хотим растянуть их на всю ширину главной оси контейнера (или высоту, если главная ось - column), то мы пишем каждому элементу одинаковый гроу. Если же нужны разные пропорции растяжения элементов, то эти пропорции вычисляются от оставшегося пустого места контейнера. Т.е. это пропорции именно РАСТЯЖЕНИЯ, а не пропорции занимаемых ширин элементов в контейнере по итогу этой операции.
Я так понимаю, в случае верстки дизайнерского проекта вместо гроу или шринк лучше юзать обычный флекс-бэзис в медиазапросах, чем пытаться что-то вычислять))
все верно, а по поводу адаптива зависит от макета
мне бы такого наставника как Вадим ...
Спасибо большое за 4к!
Вадим, добрый день. Сделай пожалуйста обучающее видео по средствам разработчика. А шутишь и комментируешь прикольно.
спецом для тебя ruclips.net/video/58_AqypXjG4/видео.html
Запишы пожалуйста 1 раз верстку как ты работаешь, именно интересно посмотреть как работает спец, чтобы было понятно как это верстать быстро)
ты шутишь? или не умеешь гуглить или на канал его зайти трудно?
когда ширинка не застегивается - на этом моменте выпал
я буковка))) мне как бы побоку))
клево! а что за мак такой большой?
мак про 16 дюймов 2019 год
@@vadymprokopchuk гдето заплакала старая рязанька 3200...
_flex-basis: 100%_ должно нормально смотреться
как сделать такой же шрифт в vs code?
Теперь flex-grow - не работает без явного указания flex-basis, так что лучшим решением будет использовать flex: 1, где видимо при отсутствующем явном указании basic последний будет считаться за 0.
Браузер - он парень простой, как тракторист (41:30). За 300 в карман не лезит ))
Нужно отдельный курс про 1000 долларовые сайты без контента.
Дальше только гриды)))
они есть на канале