flex / flex basis, flex grow и flex-shrink из модуля флексбокс / flexbox уроки
HTML-код
- Опубликовано: 20 авг 2019
- flex / flex basis, flex grow и flex-shrink из модуля флексбокс / flexbox уроки
Привет! Сегодня мы рассмотрим свойства flex-basis, flex-grow и flex-shrink из модуля flexbox, а так же их сокращённую запись - flex. После просмотра этого видео вы будете знать, как работает каждое из этих свойств, какие значения оно может принимать. верстка сайта состоит из блоков, которые должны сжиматься / расширятся, иногда обладают базовым размером. Раньше этого можно было добиться только с помощью процентов и нужно было вычислять отступы. С помощью отдельных свойств флексбокс можно настроить так, чтобы это делалось автоматически.
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ый комментарий хех
Еще flex basis и flex-shrink. Почему не написали про эти свойства:
Спасибо, добрый человек!
@@develmen1 ого, как давно это было, пожалуйста)
Да понять-то понятно как работает. Хочется больше видеть, как именно на практике, на конкретных примерах это применяется, как работает в рельном кейсе. Во всех видео уроках на ютубе одна и та же проблема, как работает в отдельности все понятно, а когда, как и где применимо - не понятно. Все равно спасибо за видео, качественный контент)
Вот везде только писали, что элементы растягиваются/ сжимаются пропорцианально, но про формулу только тут услышала. В общем спасибо, стало намного понятнее))))
Ахрененно мужик объясняет! Жалко, что больше не выпускает видео
Супер, простыми словами. Очень понятно 👍
Огромное спасибо за видео!
Отлично! Спасибо за видео.
Если кто-то полный ноль в английском и не знает, что grow - это расти, а shrink - сжиматься, то из этого видео вы для себя узнаете что-то новое. Только вот автор объясняет это 10 минут. А то, что я хотел здесь услышать, это как именно сжимается или растягивается элемент, как считать пропорцию. Автор здесь не подкачал и объяснил это за пять секунд 5:54. Гениально!
Живая документация)
Ведь правда и усваивается лучше, чем читать и это проще.
Спасибо за работу
Спасибочки. Сначало казалось это так сложно, но посмотрел данное видео, оказалось всё просто. Ещё раз Спасибо!
Огромное спасибо за разбор такой не простой темы)
Разобрались с работой этих свойств?)
Виталий, по работе с данными свойствами всё понятно (очень доступно рассказано), но есть небольшое пожелание: показывать примеры где данные свойства лучше всего применять. И еще просьба, если это возможно, осветить такой мрак как JS)))))))
@Анна Боришкевич можно вопрос, вы за 8 месяцев стали айтишником? просто интересно
понятно объяснили, спасибо)
@@SpaceVIP айтишником?
Скажите кто нибудь класс wraper является чем-то обязательным в названии, например div class="header" распазнается как header будет ли иметь свойства тэга header, что значит wrapper?
Очень просто и понятно! Большое спасибо!
Спасибо большое за знания )
Как-то так по-людски объяснил - мне очень понравилось. Спасибо. Подписываюсь на тебя.
Спасибо
Не останавливайтесь!!! Лучшый канал о верстке!!!
круто все объяснил , спасибо!
Нормально, но очень хотелось бы на реальной вёрстке посмотреть, когда какое свойство включать. Обычно, ставлю наобум шринк или гроу и смотрю, что получится
В плейлисте есть общее видео.
@@prosto_razrabotka больше практики и хотя бы приближонной к реальной работе.
@@prosto_razrabotka ссылку бы на видео в плейлисте, чтоб быстрее было
побольше таких видосов!) и побольше "ВСЕ, что нужно знать о ...." За видосики огромное спасибо!) Приятно смотреть!
Спасибо стало намного понятнее. Отличный урок и учитель.
Виталий, как всегда огонь!!!!
Спасибо -)
Спасибо, наконец-то дошло. Не знаю как у вас это получается но вы один из не многих кто правильно и доходчиво без воды объясняет !
Классно объясняешь, спасибо!
Отличное 👍 видео, спасибо!!
Благодарю -)
отличный урок, спасибо!
Очень интересно, спасибо!
Благодарю Вас за видео.
У вас просто замечательный канал! Один из лучших по веб-разработке в рунете, спасибо огромное, скоро у вас будет не меньше 500 тысяч подписчиков с таким отличным контентом!Успехов!
Подписался, спс за короткие уроки
Лысый из браузера)
это лучшее название для канала!!!) я серьезно если что) звучит прикольно и быстро запоминается)
Виталик, не кривя душой можно сказать что это очередное классное видео. было бы очень круто если бы у тебя получалось снимать больше 1 ролика в неделю. и да, жду новых видео!
Спасибо! Разобрался!
Очень понравилось! Жду Bootstrap 4!
В частности про систему сеток для удобной вёрстки!
Красавчик!
Как всегда понятно для новичков
Мне стало примерно понятно как эти свойства работают, но всё равно остались пробелы в понимании. Спасибо, вы помогли, ведь раньше я совсем не понимал как оно работает
Спасибо! Наконец перестала путаться
Именно то что и ждал и хотел. Спасибо. Жаль видео редкие. ток на выходных записываешь? Народ требует больше роликов))
Как только ютуб и народ начнёт мне приносить прибыль, обязательно -))
@@prosto_razrabotka обычно через ютуб заманивают на свои курсы, и это приносит прибыль. слишком узкий круг зрителей чтоб выйти на прибыль)
Я и раньше знал все свойства flex , но только после твоих видео начал реально разбираться, надеюсь, что такой же плейлист будет по grid.
На канале появился CSS Grid. Держу в курсе -)
ruclips.net/video/0sEKbviZ96M/видео.html
Thanks
Купила я значит марафон по flex и grid у типичной верстальщицы, так там ничего не понятно, такое ощущение что она сама эту тему не понимает, а у вас все доходчиво по полочкам разложено👏👏👏
спасибо было полезно
5:30 Не так. Это значит, что элемент с flex-grow:10 займет в два раза меньше ОСТАВШЕГОСЯ свободного пространства, чем элемент с flex-grow:5. Но в целом полезно.
наоборот, элемент с flex-grow:10 займет в два раза БОЛЬШЕ оставшегося свободного пространства, чем элемент с flex-grow:5
Не, ну это лайк
Спасибо
Хорошее объяснение, но я все равно не понял для чего flex-grow, как то уж совсем не интуитивно понятно какие там пропорции. Помоему в бутстрапе можно было масшатабировать по пропорция, а тут думаешь, что один елемент будет в 10 раз больше, другой в 5. Или это из-за того, что просто flex-basis как-то влияет
Полистайте комменты, кто-то скидывал целую формулу вычисления этих пропорций. Она замороченная. Да и чаще всего, как мне кажется, на один элемент в потоке вешается grow, а остальные не трогают. Самый простой пример - 2 колонки - первая с основным контентом, вторая фиксированный ширины, должна быть справа, там список статей например... На первую вешается grow, она вытягивается и тем самым прибивает правую колонку вправо. Либо у вас список отзывов - первая колонка фиксированная, а во второй сам контент, вот его и вытягиваете.
Расскажи пожалуйста как находить их значения, какой принцип. Особенно не понимаю как работает шринк.
👍
Хороший канал.Интересный урок.
Подпишусь-ка...
пожалуйста сними подобное видео про бутстрап 4)
Я вовремя🙃
Ага -)
Довольно таки сложную формулу в студию! Погуглить мы и сами бы смогли! 😜
Тоже хотел подробно разобраться как работает 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?
4:25 как вы сделали что item'ы прописались всем дивам?
Спасибо за видео. Будет ли у Вас в конце обзора все свойств flex, видео о том как применить все на практике. Сверстать реальную страницу, где все будет работать вместе.
Такое видео уже имеется в плейлисте
@@prosto_razrabotka Вы имеете ввиду это ?
ruclips.net/video/fK70h0CXNsU/видео.html
@@oldodyn да
Спасибо за видео, хотел бы задать вам вопрос касательно JS, не знаю, как использовать её для динамики веб сайта, сам JS я знаю, решаю задачи на кодваре на 4-5 kyu, хотелось бы узнать какие материалы помогут с этим
Тоже не знаю, поэтому взялся за изучение vue. Теперь динамика не проблема. Умные головы пишут реакты с вью, чтобы делиться опытом работы на js, который нужно знать только как алгебру.
@@user-bi4vn3bs3l тип использовать нативный JS только как трамплин к фреймворку, а делать уже все использую именно фреймворк?
3:50 а почему когда флекс-дирекшн: роу, то бэйсис по ширине не выходит за рамки контейнера, а по высоте не сжимается когда ылекс-дирекшн колумн
а где это применяется?
Часто вижу что flex-basis используют вместо width, в каких случаях это оправданно? И стоит ли вообще так делать?
в таких, что это предназначено для флекс и разница между width - большая. width - это постоянная величина, а flex-basis - базовая! От этой величины флекс отталкивается как увеличится и и как уменьшится
@@user-km6ic7ud8r Да, только забыл сказать про один ньюанс. Если поменять ось, то flex-basis используется как высота.
Поэтому, с этим нужно быть поаккуратнее :)
@@whatswrongwithyou9032 , это ты думаешь, что это высота, а в концепции флекс - это просто базовый размер по основной оси и только необразованный дурак будет использовать width и утверждать, что это тоже, что и flex-basis, пока не поймут как работают flex-shrink и flex-grow.
@@user-km6ic7ud8r Стоит ли в качестве базовой использовать именно flex ширину, или лучше width? Флекс, как я понял будет адаптивнее.
@@Theonelasthero перечитай еще раз выше разницу, почувствуй разницу .
Мне кажется не хватило акцента на том, что flex-shrink начинает работать когда в контейнере недостаточно места для элементов с их заданными flex-basis, а flex-grow когда в контейнере остается "лишнее" место
Здравствуйте, стоит ли учить SASS после того как выучил CSS или нужна практика прежде чем учить препроцессоры?
Там нечего учить... Это тот же ксс с дополнительными фишками. А на выходе вы все равно получаете ксс.
@@prosto_razrabotkaСпасибо за ответ.
лучшие видео жаль что так мало подписчиков зато 0 дизлайков на етом видео)))
Пару месяцев назад было в 10 раз меньше, так что я не жалуюсь -)
Это третье видео на эту тему и ни в одном не сказано для чего надо увеличивать или уменьшать какой то блок. Кто ни будь знает?
На сколько я знаю про flex-grow, оно пропорционально ,в зависимости от значения, разделяет свободное пространство в элементы
Было бы замечательно если бы был небольшой практический пример. А так спасибо за видео!
В плейлисте
Коментик
Как можно назвать ситуацию, когда человек берется разьяснить непонятный момент, но ничего не меняется по итогу )))))))))) ?!
предлагаю попозже провести марафон с применением всех свойств на примере верстки макета. на марафонах всегда собирается много движухи. как один из способов раскрутить канал
Да, идея крутая, но нужно время на подготовку. А его катастрофически не хватает)
это флекс гров, это вфлекс шринк, йоу
Честно говоря, не совсем так работают flex-grow и flex-shrink, даже скорее, вы продемонстрировали далеко не все их особенности
И всё-таки они есть, програмисты с нормальным произношением английских слов.
Правда вот, англицызмы, как и у многих заминяют нормальные русские слова и выражения.
за flex-basis не сказал
Интересно кто дизлайк поставил?
Не пропорционально, а в соотношении.
Очень странная подача. "Делам ТАК - получается ТАК,а теперь мы плавно переходим к flex-...." Не раскрыта тема вообще, поверхностно очень, понятнее от просмотра не стало
хм, формула ничего не сложная, лучше объяснять на её примере, а не "занимает пропорционально в 10 раз больше.." слишком много путанницы порождают такие видео