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

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

[prosto_razrabotka]

Не забудьте заглянуть сюда:

Можете добавиться в друзья:

А так же, подписаться на страницы:

[UCnBUnAmcvCsFePEtmn]

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

На примере из видео про 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ый комментарий хех

[Nabunga]

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

[sergeyfartovy]

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

[yunna]

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

[DikWZD]

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

[loremipsum]

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

[nickudo]

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

[xoezkoh]

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

[alinafitisova]

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

[ijskitu]

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

[nhghdwe]

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

[zgcfhus]

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

[Iraes]

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

[Aslankz]

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

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

[qgfypdk]

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

[jficupk]

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

[viktorprytuliuk]

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

[faseplay.]

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