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

Рет қаралды 26,534

4 жыл бұрын

flex / flex basis, flex grow и flex-shrink из модуля флексбокс / flexbox уроки
Привет! Сегодня мы рассмотрим свойства flex-basis, flex-grow и flex-shrink из модуля flexbox, а так же их сокращённую запись - flex. После просмотра этого видео вы будете знать, как работает каждое из этих свойств, какие значения оно может принимать. верстка сайта состоит из блоков, которые должны сжиматься / расширятся, иногда обладают базовым размером. Раньше этого можно было добиться только с помощью процентов и нужно было вычислять отступы. С помощью отдельных свойств флексбокс можно настроить так, чтобы это делалось автоматически.
flexbox уроки с подробным описанием всех свойств на канале!

Пікірлер: 117

@prosto_razrabotka 3 жыл бұрын

Не забудьте заглянуть сюда: ❓ Запись на консультацию - 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/

@UCnBUnAmcvCs8FePEtmn 3 жыл бұрын

Не услышал в видео самой главной сути этих свойств. Постараюсь дополнить понятным языком для тех, кто не понимает принцип работы. На примере из видео про 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ый комментарий хех

@user-xq6hg2iz9z Жыл бұрын

Еще flex basis и flex-shrink. Почему не написали про эти свойства:

@develmen1 10 ай бұрын

Спасибо, добрый человек!

@UCnBUnAmcvCs8FePEtmn 10 ай бұрын

@@develmen1 ого, как давно это было, пожалуйста)

@Nabunga 4 жыл бұрын

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

@Dik131WZD Жыл бұрын

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

@gromovoyaa2765 4 жыл бұрын

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

@user-ij4sk6it1u 4 жыл бұрын

это лучшее название для канала!!!) я серьезно если что) звучит прикольно и быстро запоминается)

@yunna1466 Жыл бұрын

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

@TheTexPro 4 жыл бұрын

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

@Aslankz1983 4 жыл бұрын

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

@user-xo4ez5ko1h 4 жыл бұрын

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

@nickudo3721 3 жыл бұрын

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

@user-ij4sk6it1u 4 жыл бұрын

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

@alinafitisova3176 4 жыл бұрын

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

@user-zg6cf1hu3s Жыл бұрын

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

@user-jf2ic3up1k 4 жыл бұрын

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

@user-nh5gh3dw7e 4 жыл бұрын

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

@sergeyfartovy2231 3 жыл бұрын

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

@Iraes05 3 жыл бұрын

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

@viktorprytuliuk6177 4 жыл бұрын

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

@user-qg3fy2pd9k 3 жыл бұрын

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

@AShahabov Жыл бұрын

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

@beksedy3830 Жыл бұрын

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

@user-pn2ev2je2l 3 жыл бұрын

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

@user-nj2ln1kh2r 4 жыл бұрын

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

@prosto_razrabotka 4 жыл бұрын

Спасибо -)

@loremipsum353 4 жыл бұрын

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

@prosto_razrabotka 4 жыл бұрын

В плейлисте есть общее видео.

@Max-kr4ie 4 жыл бұрын

@@prosto_razrabotka больше практики и хотя бы приближонной к реальной работе.

@kubris.developer 4 жыл бұрын

@@prosto_razrabotka ссылку бы на видео в плейлисте, чтоб быстрее было

@prosto_razrabotka 4 жыл бұрын

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

@user-nj2ln1kh2r 4 жыл бұрын

Виталий, по работе с данными свойствами всё понятно (очень доступно рассказано), но есть небольшое пожелание: показывать примеры где данные свойства лучше всего применять. И еще просьба, если это возможно, осветить такой мрак как JS)))))))

@SpaceVIP 4 жыл бұрын

@Анна Боришкевич можно вопрос, вы за 8 месяцев стали айтишником? просто интересно

@muradaliyev3406 4 жыл бұрын

понятно объяснили, спасибо)

@AnyPercent_ 3 жыл бұрын

@@SpaceVIP айтишником?

@TAIMAS_Kz 3 жыл бұрын

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

@Max-kr4ie 4 жыл бұрын

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

@prosto_razrabotka 4 жыл бұрын

Как только ютуб и народ начнёт мне приносить прибыль, обязательно -))

@Max-kr4ie 4 жыл бұрын

@@prosto_razrabotka обычно через ютуб заманивают на свои курсы, и это приносит прибыль. слишком узкий круг зрителей чтоб выйти на прибыль)

@user-hr6ug3uw4o 2 жыл бұрын

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

@AbraKadabra000 4 жыл бұрын

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

@prosto_razrabotka 4 жыл бұрын

Благодарю -)

@Evgeny_Yurievich 3 жыл бұрын

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

@45632476 4 жыл бұрын

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

@prosto_razrabotka 4 жыл бұрын

Спасибо

@Strrroke 3 жыл бұрын

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

@faseplay. 3 жыл бұрын

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

@vladprodan7010 4 жыл бұрын

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

@Minecline 4 жыл бұрын

В частности про систему сеток для удобной вёрстки!

@user-jh2hl9kg3t 2 жыл бұрын

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

@gregotokarev 4 жыл бұрын

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

@prosto_razrabotka 4 жыл бұрын

На канале появился CSS Grid. Держу в курсе -) kzfaq.info/get/bejne/Ztl1fsWnzsCdZoE.html

@KostiaBazrov 3 жыл бұрын

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

@Doktornikita 3 жыл бұрын

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

@dailydaily4522 3 жыл бұрын

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

@Oklesia 3 жыл бұрын

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

@viktorshvets9914 2 жыл бұрын

Красавчик!

@user-ff3lc1et3u 3 жыл бұрын

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

@madaminxolmurodov2725 4 жыл бұрын

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

@xsunder5454 4 жыл бұрын

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

@agilkerimov 4 жыл бұрын

Спасибо

@andreypanin5257 3 жыл бұрын

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

@user-yq8pq3jf3n Жыл бұрын

наоборот, элемент с flex-grow:10 займет в два раза БОЛЬШЕ оставшегося свободного пространства, чем элемент с flex-grow:5

@user-mk2tl8rs1m 4 жыл бұрын

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

@prosto_razrabotka 4 жыл бұрын

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

@GamesServices 3 жыл бұрын

Thanks

@oldodyn 4 жыл бұрын

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

@prosto_razrabotka 4 жыл бұрын

Такое видео уже имеется в плейлисте

@oldodyn 4 жыл бұрын

@@prosto_razrabotka Вы имеете ввиду это ? kzfaq.info/get/bejne/nLFnY8thqL6yo4k.html

@prosto_razrabotka 4 жыл бұрын

@@oldodyn да

@user-zt8lt7jc6f 4 жыл бұрын

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

@daniyartulenbaev 9 ай бұрын

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

@yakut54 4 жыл бұрын

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

@user-nc4gs9lz9d 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.

@slaventiypchelkin4625 4 жыл бұрын

Я вовремя🙃

@prosto_razrabotka 4 жыл бұрын

Ага -)

@user-ec9he6ve6d 4 жыл бұрын

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

@user-bi4vn3bs3l 4 жыл бұрын

Тоже не знаю, поэтому взялся за изучение vue. Теперь динамика не проблема. Умные головы пишут реакты с вью, чтобы делиться опытом работы на js, который нужно знать только как алгебру.

@user-ec9he6ve6d 4 жыл бұрын

@@user-bi4vn3bs3l тип использовать нативный JS только как трамплин к фреймворку, а делать уже все использую именно фреймворк?

@antonl3910 3 жыл бұрын

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

@alexandrdavydov6771 4 жыл бұрын

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

@prosto_razrabotka 4 жыл бұрын

Пару месяцев назад было в 10 раз меньше, так что я не жалуюсь -)

@re1axingmusicforsoulandbody 4 жыл бұрын

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

@sultanalibekov9767 4 жыл бұрын

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

@asss6328 Жыл бұрын

👍

@user-yk7pn3ph1m 4 жыл бұрын

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

@prosto_razrabotka 4 жыл бұрын

Там нечего учить... Это тот же ксс с дополнительными фишками. А на выходе вы все равно получаете ксс.

@user-yk7pn3ph1m 4 жыл бұрын

@@prosto_razrabotkaСпасибо за ответ.

@TAIMAS_Kz 3 жыл бұрын

@maltamagistro Жыл бұрын

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

@AntonioBenderas Жыл бұрын

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

@evgeniust6328 4 жыл бұрын

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

@user-km6ic7ud8r 4 жыл бұрын

в таких, что это предназначено для флекс и разница между width - большая. width - это постоянная величина, а flex-basis - базовая! От этой величины флекс отталкивается как увеличится и и как уменьшится

@whatswrongwithyou9032 4 жыл бұрын

@@user-km6ic7ud8r Да, только забыл сказать про один ньюанс. Если поменять ось, то flex-basis используется как высота. Поэтому, с этим нужно быть поаккуратнее :)

@user-km6ic7ud8r 4 жыл бұрын

@@whatswrongwithyou9032 , это ты думаешь, что это высота, а в концепции флекс - это просто базовый размер по основной оси и только необразованный дурак будет использовать width и утверждать, что это тоже, что и flex-basis, пока не поймут как работают flex-shrink и flex-grow.

@Theonelasthero 3 жыл бұрын

@@user-km6ic7ud8r Стоит ли в качестве базовой использовать именно flex ширину, или лучше width? Флекс, как я понял будет адаптивнее.

@user-km6ic7ud8r 3 жыл бұрын

@@Theonelasthero перечитай еще раз выше разницу, почувствуй разницу .

@user-jf2jw8of2e 3 жыл бұрын

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

@kotoakira4614 3 жыл бұрын

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

@user-xq6hg2iz9z Жыл бұрын

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

@vladislavivanov1246 4 жыл бұрын

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

@prosto_razrabotka 4 жыл бұрын

В плейлисте

@savadim Жыл бұрын

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

@alexlisouski4069 4 жыл бұрын

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

@prosto_razrabotka 4 жыл бұрын

Да, идея крутая, но нужно время на подготовку. А его катастрофически не хватает)

@fife3366 3 жыл бұрын

Коментик

@user-mx6ts8xi4m 3 жыл бұрын

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

@maltamagistro 9 ай бұрын

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

@lezver_94 Жыл бұрын

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

@FailedArchaeologist 4 жыл бұрын

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

@pavelp7148 3 жыл бұрын

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

@user-wb1ow1pk9v 4 жыл бұрын

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

@user-gu8sv9rx7n 2 жыл бұрын

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

@TheKirk1989 10 ай бұрын

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