flex / flex basis, flex grow и flex-shrink из модуля флексбокс / flexbox уроки 

Не забудьте заглянуть сюда: ❓ Запись на консультацию - prosto-razrabotka.ru/ ✨ Telegram канал - t.me/prostorazrabotka/ 🔥 Telegram чат - t.me/prostorazrabotkachat/ Можете добавиться в друзья: 📷 Instagram - instagram.com/vitaliy.kirenkov/ 📘 ВКонтакте - vk.com/vitaliy.kirenkov/ 📗 Facebook - facebook.com/vitaliy.kirenkov/ 📙 LinkedIn - www.linkedin.com/in/kirenkov/ ✏️ Twitter - twitter.com/VitaliyKirenkov/ А так же, подписаться на страницы: 📘 ВКонтакте - vk.com/public195137161/ 📗 Facebook - facebook.com/prostorazrabotka/

Не услышал в видео самой главной сути этих свойств. Постараюсь дополнить понятным языком для тех, кто не понимает принцип работы. На примере из видео про flex-grow = 5 у третьего элемента и flex-grow = 10 у пятого. И так у нас есть свободное пространство, в данном случае оно справа (уточнение для зрительного понимания, с какой стороны свободное пространство роль не играет) Сколько оно в размере я не знаю, возьмем 300px - свободное пространство. Теперь сложим наше соотношение 5 + 10 = 15 - сумма всех наших grow. Это количество частей на которое мы поделим свободное пространство (300px). 300 / 15 = 20px одна часть Получается, что третьему элементу с flex-grow = 5 отойдет 5 * 20 = 100 пикселей свободного пространства из 300px, а пятому с flex-grow = 10 отойдет 10*20=200 пикселей из оставшегося свободного пространства. Надеюсь это кому то поможет, всем удачи в обучении. p.s как прикольно вышло, я ставлю 1000чный лайк и 100ый комментарий хех

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

Ахрененно мужик объясняет! Жалко, что больше не выпускает видео

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

Супер, простыми словами. Очень понятно 👍

Огромное спасибо за видео!

Отлично! Спасибо за видео.

Если кто-то полный ноль в английском и не знает, что grow - это расти, а shrink - сжиматься, то из этого видео вы для себя узнаете что-то новое. Только вот автор объясняет это 10 минут. А то, что я хотел здесь услышать, это как именно сжимается или растягивается элемент, как считать пропорцию. Автор здесь не подкачал и объяснил это за пять секунд 5:54. Гениально!

Живая документация) Ведь правда и усваивается лучше, чем читать и это проще. Спасибо за работу

Спасибочки. Сначало казалось это так сложно, но посмотрел данное видео, оказалось всё просто. Ещё раз Спасибо!

Огромное спасибо за разбор такой не простой темы)

Разобрались с работой этих свойств?)

Очень просто и понятно! Большое спасибо!

Спасибо большое за знания )

Как-то так по-людски объяснил - мне очень понравилось. Спасибо. Подписываюсь на тебя.

Не останавливайтесь!!! Лучшый канал о верстке!!!

круто все объяснил , спасибо!

Нормально, но очень хотелось бы на реальной вёрстке посмотреть, когда какое свойство включать. Обычно, ставлю наобум шринк или гроу и смотрю, что получится

побольше таких видосов!) и побольше "ВСЕ, что нужно знать о ...." За видосики огромное спасибо!) Приятно смотреть!

Спасибо стало намного понятнее. Отличный урок и учитель.

Виталий, как всегда огонь!!!!

Спасибо, наконец-то дошло. Не знаю как у вас это получается но вы один из не многих кто правильно и доходчиво без воды объясняет !

Классно объясняешь, спасибо!

Отличное 👍 видео, спасибо!!

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

Очень интересно, спасибо!

Благодарю Вас за видео.

У вас просто замечательный канал! Один из лучших по веб-разработке в рунете, спасибо огромное, скоро у вас будет не меньше 500 тысяч подписчиков с таким отличным контентом!Успехов!

Подписался, спс за короткие уроки

Лысый из браузера)

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

Спасибо! Разобрался!

Очень понравилось! Жду Bootstrap 4!

Красавчик!

Как всегда понятно для новичков

Мне стало примерно понятно как эти свойства работают, но всё равно остались пробелы в понимании. Спасибо, вы помогли, ведь раньше я совсем не понимал как оно работает

Спасибо! Наконец перестала путаться

Именно то что и ждал и хотел. Спасибо. Жаль видео редкие. ток на выходных записываешь? Народ требует больше роликов))

Я и раньше знал все свойства flex , но только после твоих видео начал реально разбираться, надеюсь, что такой же плейлист будет по grid.

Thanks

Купила я значит марафон по flex и grid у типичной верстальщицы, так там ничего не понятно, такое ощущение что она сама эту тему не понимает, а у вас все доходчиво по полочкам разложено👏👏👏

спасибо было полезно

5:30 Не так. Это значит, что элемент с flex-grow:10 займет в два раза меньше ОСТАВШЕГОСЯ свободного пространства, чем элемент с flex-grow:5. Но в целом полезно.

Не, ну это лайк

Спасибо

Хорошее объяснение, но я все равно не понял для чего flex-grow, как то уж совсем не интуитивно понятно какие там пропорции. Помоему в бутстрапе можно было масшатабировать по пропорция, а тут думаешь, что один елемент будет в 10 раз больше, другой в 5. Или это из-за того, что просто flex-basis как-то влияет

Расскажи пожалуйста как находить их значения, какой принцип. Особенно не понимаю как работает шринк.

👍

Хороший канал.Интересный урок. Подпишусь-ка...

пожалуйста сними подобное видео про бутстрап 4)

Я вовремя🙃

Довольно таки сложную формулу в студию! Погуглить мы и сами бы смогли! 😜

Здравствуйте, ваши ролики очень информативные интересные, продолжайте дальше. Но вот вопрос, не могли бы вы в каком либо уроке рассказать про вордпресс, ибо для Джуна на фрилансе популярен вордпресс. Либо же вы не могли бы мне помощь натянуть готовый сайт на вордпресс. Буду благодарен:)

Скажите кто нибудь класс wraper является чем-то обязательным в названии, например div class="header" распазнается как header будет ли иметь свойства тэга header, что значит wrapper?

4:25 как вы сделали что item'ы прописались всем дивам?

Спасибо за видео. Будет ли у Вас в конце обзора все свойств flex, видео о том как применить все на практике. Сверстать реальную страницу, где все будет работать вместе.

Спасибо за видео, хотел бы задать вам вопрос касательно JS, не знаю, как использовать её для динамики веб сайта, сам JS я знаю, решаю задачи на кодваре на 4-5 kyu, хотелось бы узнать какие материалы помогут с этим

3:50 а почему когда флекс-дирекшн: роу, то бэйсис по ширине не выходит за рамки контейнера, а по высоте не сжимается когда ылекс-дирекшн колумн

а где это применяется?

Часто вижу что flex-basis используют вместо width, в каких случаях это оправданно? И стоит ли вообще так делать?

Мне кажется не хватило акцента на том, что flex-shrink начинает работать когда в контейнере недостаточно места для элементов с их заданными flex-basis, а flex-grow когда в контейнере остается "лишнее" место

Здравствуйте, стоит ли учить SASS после того как выучил CSS или нужна практика прежде чем учить препроцессоры?

лучшие видео жаль что так мало подписчиков зато 0 дизлайков на етом видео)))

Это третье видео на эту тему и ни в одном не сказано для чего надо увеличивать или уменьшать какой то блок. Кто ни будь знает?

На сколько я знаю про flex-grow, оно пропорционально ,в зависимости от значения, разделяет свободное пространство в элементы

Было бы замечательно если бы был небольшой практический пример. А так спасибо за видео!

Коментик

Как можно назвать ситуацию, когда человек берется разьяснить непонятный момент, но ничего не меняется по итогу )))))))))) ?!

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

это флекс гров, это вфлекс шринк, йоу

Честно говоря, не совсем так работают flex-grow и flex-shrink, даже скорее, вы продемонстрировали далеко не все их особенности

И всё-таки они есть, програмисты с нормальным произношением английских слов. Правда вот, англицызмы, как и у многих заминяют нормальные русские слова и выражения.

за flex-basis не сказал

Интересно кто дизлайк поставил?

Не пропорционально, а в соотношении.

Очень странная подача. "Делам ТАК - получается ТАК,а теперь мы плавно переходим к flex-...." Не раскрыта тема вообще, поверхностно очень, понятнее от просмотра не стало

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