Не услышал в видео самой главной сути этих свойств. Постараюсь дополнить понятным языком для тех, кто не понимает принцип работы. На примере из видео про 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. Гениально!
Вот везде только писали, что элементы растягиваются/ сжимаются пропорцианально, но про формулу только тут услышала. В общем спасибо, стало намного понятнее))))
Купила я значит марафон по flex и grid у типичной верстальщицы, так там ничего не понятно, такое ощущение что она сама эту тему не понимает, а у вас все доходчиво по полочкам разложено👏👏👏
Мне стало примерно понятно как эти свойства работают, но всё равно остались пробелы в понимании. Спасибо, вы помогли, ведь раньше я совсем не понимал как оно работает
Виталий, по работе с данными свойствами всё понятно (очень доступно рассказано), но есть небольшое пожелание: показывать примеры где данные свойства лучше всего применять. И еще просьба, если это возможно, осветить такой мрак как JS)))))))
Скажите кто нибудь класс wraper является чем-то обязательным в названии, например div class="header" распазнается как header будет ли иметь свойства тэга header, что значит wrapper?
Нормально, но очень хотелось бы на реальной вёрстке посмотреть, когда какое свойство включать. Обычно, ставлю наобум шринк или гроу и смотрю, что получится
У вас просто замечательный канал! Один из лучших по веб-разработке в рунете, спасибо огромное, скоро у вас будет не меньше 500 тысяч подписчиков с таким отличным контентом!Успехов!
Виталик, не кривя душой можно сказать что это очередное классное видео. было бы очень круто если бы у тебя получалось снимать больше 1 ролика в неделю. и да, жду новых видео!
Хорошее объяснение, но я все равно не понял для чего flex-grow, как то уж совсем не интуитивно понятно какие там пропорции. Помоему в бутстрапе можно было масшатабировать по пропорция, а тут думаешь, что один елемент будет в 10 раз больше, другой в 5. Или это из-за того, что просто flex-basis как-то влияет
Полистайте комменты, кто-то скидывал целую формулу вычисления этих пропорций. Она замороченная. Да и чаще всего, как мне кажется, на один элемент в потоке вешается grow, а остальные не трогают. Самый простой пример - 2 колонки - первая с основным контентом, вторая фиксированный ширины, должна быть справа, там список статей например... На первую вешается grow, она вытягивается и тем самым прибивает правую колонку вправо. Либо у вас список отзывов - первая колонка фиксированная, а во второй сам контент, вот его и вытягиваете.
5:30 Не так. Это значит, что элемент с flex-grow:10 займет в два раза меньше ОСТАВШЕГОСЯ свободного пространства, чем элемент с flex-grow:5. Но в целом полезно.
Тоже хотел подробно разобраться как работает flex-grow. medium.com/@stasonmars/%D0%BA%D0%B0%D0%BA-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82-flex-grow-%D0%B2-css-%D0%BF%D0%BE%D0%B4%D1%80%D0%BE%D0%B1%D0%BD%D0%BE%D0%B5-%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE-557d406be844 Если коротко: высчитывается свободное место в контейнере(то что не занято элементами), делится на общее число flex-grow(т.е сумма flex-grow всех элементов) и дальше каждому элементу с flex-grow добавляется соответствующая часть свободного места. Важно понять что именно добавляется а не тупо присваивается. Т.е если есть 2 элемента скажем 100px, 200px, и у них flex-grow 1 и 4, а свободное место скажем 50px, то первый элемент станет 100 + 50 * 1 / (1 + 4) = 110, второй элемент станет 100 + 50 * 4 / (1 + 4) = 140.
Скажите кто нибудь класс wraper является чем-то обязательным в названии, например div class="header" распазнается как header будет ли иметь свойства тэга header, что значит wrapper?
Мне кажется не хватило акцента на том, что flex-shrink начинает работать когда в контейнере недостаточно места для элементов с их заданными flex-basis, а flex-grow когда в контейнере остается "лишнее" место
в таких, что это предназначено для флекс и разница между width - большая. width - это постоянная величина, а flex-basis - базовая! От этой величины флекс отталкивается как увеличится и и как уменьшится
@@Прощепростого-д6р Да, только забыл сказать про один ньюанс. Если поменять ось, то flex-basis используется как высота. Поэтому, с этим нужно быть поаккуратнее :)
@@whatswrongwithyou9032 , это ты думаешь, что это высота, а в концепции флекс - это просто базовый размер по основной оси и только необразованный дурак будет использовать width и утверждать, что это тоже, что и flex-basis, пока не поймут как работают flex-shrink и flex-grow.
Здравствуйте, ваши ролики очень информативные интересные, продолжайте дальше. Но вот вопрос, не могли бы вы в каком либо уроке рассказать про вордпресс, ибо для Джуна на фрилансе популярен вордпресс. Либо же вы не могли бы мне помощь натянуть готовый сайт на вордпресс. Буду благодарен:)
Спасибо за видео, хотел бы задать вам вопрос касательно JS, не знаю, как использовать её для динамики веб сайта, сам JS я знаю, решаю задачи на кодваре на 4-5 kyu, хотелось бы узнать какие материалы помогут с этим
Тоже не знаю, поэтому взялся за изучение vue. Теперь динамика не проблема. Умные головы пишут реакты с вью, чтобы делиться опытом работы на js, который нужно знать только как алгебру.
Спасибо за видео. Будет ли у Вас в конце обзора все свойств flex, видео о том как применить все на практике. Сверстать реальную страницу, где все будет работать вместе.
предлагаю попозже провести марафон с применением всех свойств на примере верстки макета. на марафонах всегда собирается много движухи. как один из способов раскрутить канал
И всё-таки они есть, програмисты с нормальным произношением английских слов. Правда вот, англицызмы, как и у многих заминяют нормальные русские слова и выражения.
Очень странная подача. "Делам ТАК - получается ТАК,а теперь мы плавно переходим к flex-...." Не раскрыта тема вообще, поверхностно очень, понятнее от просмотра не стало
хм, формула ничего не сложная, лучше объяснять на её примере, а не "занимает пропорционально в 10 раз больше.." слишком много путанницы порождают такие видео
Не забудьте заглянуть сюда:
❓ Запись на консультацию - 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ый комментарий хех
Еще flex basis и flex-shrink. Почему не написали про эти свойства:
Спасибо, добрый человек!
@@develmen1 ого, как давно это было, пожалуйста)
Да понять-то понятно как работает. Хочется больше видеть, как именно на практике, на конкретных примерах это применяется, как работает в рельном кейсе. Во всех видео уроках на ютубе одна и та же проблема, как работает в отдельности все понятно, а когда, как и где применимо - не понятно. Все равно спасибо за видео, качественный контент)
Если кто-то полный ноль в английском и не знает, что grow - это расти, а shrink - сжиматься, то из этого видео вы для себя узнаете что-то новое. Только вот автор объясняет это 10 минут. А то, что я хотел здесь услышать, это как именно сжимается или растягивается элемент, как считать пропорцию. Автор здесь не подкачал и объяснил это за пять секунд 5:54. Гениально!
Вот везде только писали, что элементы растягиваются/ сжимаются пропорцианально, но про формулу только тут услышала. В общем спасибо, стало намного понятнее))))
Не останавливайтесь!!! Лучшый канал о верстке!!!
Ахрененно мужик объясняет! Жалко, что больше не выпускает видео
Как-то так по-людски объяснил - мне очень понравилось. Спасибо. Подписываюсь на тебя.
Спасибо
Купила я значит марафон по flex и grid у типичной верстальщицы, так там ничего не понятно, такое ощущение что она сама эту тему не понимает, а у вас все доходчиво по полочкам разложено👏👏👏
Мне стало примерно понятно как эти свойства работают, но всё равно остались пробелы в понимании. Спасибо, вы помогли, ведь раньше я совсем не понимал как оно работает
Спасибо, наконец-то дошло. Не знаю как у вас это получается но вы один из не многих кто правильно и доходчиво без воды объясняет !
Живая документация)
Ведь правда и усваивается лучше, чем читать и это проще.
Спасибо за работу
Разобрались с работой этих свойств?)
Виталий, по работе с данными свойствами всё понятно (очень доступно рассказано), но есть небольшое пожелание: показывать примеры где данные свойства лучше всего применять. И еще просьба, если это возможно, осветить такой мрак как JS)))))))
@Анна Боришкевич можно вопрос, вы за 8 месяцев стали айтишником? просто интересно
понятно объяснили, спасибо)
@@SpaceVIP айтишником?
Скажите кто нибудь класс wraper является чем-то обязательным в названии, например div class="header" распазнается как header будет ли иметь свойства тэга header, что значит wrapper?
Отлично! Спасибо за видео.
Как всегда понятно для новичков
Спасибо большое за знания )
круто все объяснил , спасибо!
Супер, простыми словами. Очень понятно 👍
Спасибо стало намного понятнее. Отличный урок и учитель.
Огромное спасибо за разбор такой не простой темы)
Спасибочки. Сначало казалось это так сложно, но посмотрел данное видео, оказалось всё просто. Ещё раз Спасибо!
Лысый из браузера)
это лучшее название для канала!!!) я серьезно если что) звучит прикольно и быстро запоминается)
Нормально, но очень хотелось бы на реальной вёрстке посмотреть, когда какое свойство включать. Обычно, ставлю наобум шринк или гроу и смотрю, что получится
В плейлисте есть общее видео.
@@prosto_razrabotka больше практики и хотя бы приближонной к реальной работе.
@@prosto_razrabotka ссылку бы на видео в плейлисте, чтоб быстрее было
побольше таких видосов!) и побольше "ВСЕ, что нужно знать о ...." За видосики огромное спасибо!) Приятно смотреть!
Подписался, спс за короткие уроки
отличный урок, спасибо!
Спасибо! Наконец перестала путаться
Виталий, как всегда огонь!!!!
Спасибо -)
Очень просто и понятно! Большое спасибо!
Благодарю Вас за видео.
У вас просто замечательный канал! Один из лучших по веб-разработке в рунете, спасибо огромное, скоро у вас будет не меньше 500 тысяч подписчиков с таким отличным контентом!Успехов!
Я и раньше знал все свойства flex , но только после твоих видео начал реально разбираться, надеюсь, что такой же плейлист будет по grid.
На канале появился CSS Grid. Держу в курсе -)
ruclips.net/video/0sEKbviZ96M/видео.html
Очень интересно, спасибо!
Классно объясняешь, спасибо!
Красавчик!
Огромное спасибо за видео!
Именно то что и ждал и хотел. Спасибо. Жаль видео редкие. ток на выходных записываешь? Народ требует больше роликов))
Как только ютуб и народ начнёт мне приносить прибыль, обязательно -))
@@prosto_razrabotka обычно через ютуб заманивают на свои курсы, и это приносит прибыль. слишком узкий круг зрителей чтоб выйти на прибыль)
Очень понравилось! Жду Bootstrap 4!
В частности про систему сеток для удобной вёрстки!
Спасибо! Разобрался!
Виталик, не кривя душой можно сказать что это очередное классное видео. было бы очень круто если бы у тебя получалось снимать больше 1 ролика в неделю. и да, жду новых видео!
Thanks
Отличное 👍 видео, спасибо!!
Благодарю -)
Не, ну это лайк
Хорошее объяснение, но я все равно не понял для чего flex-grow, как то уж совсем не интуитивно понятно какие там пропорции. Помоему в бутстрапе можно было масшатабировать по пропорция, а тут думаешь, что один елемент будет в 10 раз больше, другой в 5. Или это из-за того, что просто flex-basis как-то влияет
Полистайте комменты, кто-то скидывал целую формулу вычисления этих пропорций. Она замороченная. Да и чаще всего, как мне кажется, на один элемент в потоке вешается grow, а остальные не трогают. Самый простой пример - 2 колонки - первая с основным контентом, вторая фиксированный ширины, должна быть справа, там список статей например... На первую вешается grow, она вытягивается и тем самым прибивает правую колонку вправо. Либо у вас список отзывов - первая колонка фиксированная, а во второй сам контент, вот его и вытягиваете.
5:30 Не так. Это значит, что элемент с flex-grow:10 займет в два раза меньше ОСТАВШЕГОСЯ свободного пространства, чем элемент с flex-grow:5. Но в целом полезно.
наоборот, элемент с flex-grow:10 займет в два раза БОЛЬШЕ оставшегося свободного пространства, чем элемент с flex-grow:5
Хороший канал.Интересный урок.
Подпишусь-ка...
Расскажи пожалуйста как находить их значения, какой принцип. Особенно не понимаю как работает шринк.
Довольно таки сложную формулу в студию! Погуглить мы и сами бы смогли! 😜
Тоже хотел подробно разобраться как работает flex-grow.
medium.com/@stasonmars/%D0%BA%D0%B0%D0%BA-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82-flex-grow-%D0%B2-css-%D0%BF%D0%BE%D0%B4%D1%80%D0%BE%D0%B1%D0%BD%D0%BE%D0%B5-%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE-557d406be844
Если коротко: высчитывается свободное место в контейнере(то что не занято элементами), делится на общее число flex-grow(т.е сумма flex-grow всех элементов) и дальше каждому элементу с flex-grow добавляется соответствующая часть свободного места. Важно понять что именно добавляется а не тупо присваивается. Т.е если есть 2 элемента скажем 100px, 200px, и у них flex-grow 1 и 4, а свободное место скажем 50px, то первый элемент станет 100 + 50 * 1 / (1 + 4) = 110, второй элемент станет 100 + 50 * 4 / (1 + 4) = 140.
спасибо было полезно
Скажите кто нибудь класс wraper является чем-то обязательным в названии, например div class="header" распазнается как header будет ли иметь свойства тэга header, что значит wrapper?
лучшие видео жаль что так мало подписчиков зато 0 дизлайков на етом видео)))
Пару месяцев назад было в 10 раз меньше, так что я не жалуюсь -)
4:25 как вы сделали что item'ы прописались всем дивам?
На сколько я знаю про flex-grow, оно пропорционально ,в зависимости от значения, разделяет свободное пространство в элементы
Мне кажется не хватило акцента на том, что flex-shrink начинает работать когда в контейнере недостаточно места для элементов с их заданными flex-basis, а flex-grow когда в контейнере остается "лишнее" место
пожалуйста сними подобное видео про бутстрап 4)
3:50 а почему когда флекс-дирекшн: роу, то бэйсис по ширине не выходит за рамки контейнера, а по высоте не сжимается когда ылекс-дирекшн колумн
Часто вижу что flex-basis используют вместо width, в каких случаях это оправданно? И стоит ли вообще так делать?
в таких, что это предназначено для флекс и разница между width - большая. width - это постоянная величина, а flex-basis - базовая! От этой величины флекс отталкивается как увеличится и и как уменьшится
@@Прощепростого-д6р Да, только забыл сказать про один ньюанс. Если поменять ось, то flex-basis используется как высота.
Поэтому, с этим нужно быть поаккуратнее :)
@@whatswrongwithyou9032 , это ты думаешь, что это высота, а в концепции флекс - это просто базовый размер по основной оси и только необразованный дурак будет использовать width и утверждать, что это тоже, что и flex-basis, пока не поймут как работают flex-shrink и flex-grow.
@@Прощепростого-д6р Стоит ли в качестве базовой использовать именно flex ширину, или лучше width? Флекс, как я понял будет адаптивнее.
@@Theonelasthero перечитай еще раз выше разницу, почувствуй разницу .
Спасибо
Здравствуйте, ваши ролики очень информативные интересные, продолжайте дальше. Но вот вопрос, не могли бы вы в каком либо уроке рассказать про вордпресс, ибо для Джуна на фрилансе популярен вордпресс. Либо же вы не могли бы мне помощь натянуть готовый сайт на вордпресс. Буду благодарен:)
а где это применяется?
Я вовремя🙃
Ага -)
Спасибо за видео, хотел бы задать вам вопрос касательно JS, не знаю, как использовать её для динамики веб сайта, сам JS я знаю, решаю задачи на кодваре на 4-5 kyu, хотелось бы узнать какие материалы помогут с этим
Тоже не знаю, поэтому взялся за изучение vue. Теперь динамика не проблема. Умные головы пишут реакты с вью, чтобы делиться опытом работы на js, который нужно знать только как алгебру.
@@ЭдуардЛутков тип использовать нативный JS только как трамплин к фреймворку, а делать уже все использую именно фреймворк?
Спасибо за видео. Будет ли у Вас в конце обзора все свойств flex, видео о том как применить все на практике. Сверстать реальную страницу, где все будет работать вместе.
Такое видео уже имеется в плейлисте
@@prosto_razrabotka Вы имеете ввиду это ?
ruclips.net/video/fK70h0CXNsU/видео.html
@@oldodyn да
Это третье видео на эту тему и ни в одном не сказано для чего надо увеличивать или уменьшать какой то блок. Кто ни будь знает?
Здравствуйте, стоит ли учить SASS после того как выучил CSS или нужна практика прежде чем учить препроцессоры?
Там нечего учить... Это тот же ксс с дополнительными фишками. А на выходе вы все равно получаете ксс.
@@prosto_razrabotkaСпасибо за ответ.
Коментик
Было бы замечательно если бы был небольшой практический пример. А так спасибо за видео!
В плейлисте
предлагаю попозже провести марафон с применением всех свойств на примере верстки макета. на марафонах всегда собирается много движухи. как один из способов раскрутить канал
Да, идея крутая, но нужно время на подготовку. А его катастрофически не хватает)
Как можно назвать ситуацию, когда человек берется разьяснить непонятный момент, но ничего не меняется по итогу )))))))))) ?!
это флекс гров, это вфлекс шринк, йоу
Честно говоря, не совсем так работают flex-grow и flex-shrink, даже скорее, вы продемонстрировали далеко не все их особенности
за flex-basis не сказал
Интересно кто дизлайк поставил?
И всё-таки они есть, програмисты с нормальным произношением английских слов.
Правда вот, англицызмы, как и у многих заминяют нормальные русские слова и выражения.
Не пропорционально, а в соотношении.
Очень странная подача. "Делам ТАК - получается ТАК,а теперь мы плавно переходим к flex-...." Не раскрыта тема вообще, поверхностно очень, понятнее от просмотра не стало
хм, формула ничего не сложная, лучше объяснять на её примере, а не "занимает пропорционально в 10 раз больше.." слишком много путанницы порождают такие видео