Практическое изучение основ Flexbox. Использование flexbox. flexbox верстка макета

[@prosto_razrabotka]

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

[@braivs]

Понравилось руководство. Практичное. Мотивирует самому верстать.

[@nickudo3721]

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

[@smodiffnya]

Пойду флексить

[@robinzon___4178]

ахаххаха )))))))))))))

[@artemo9565]

Супер! хоть кто-то дал отличный урок новичку, как прикрепить футер к низу без костылей. Да и вообще отличный урок о флексбоксах. Спасибо Виталий!

[@prosto_razrabotka]

Благодарю

[@tohoto2183]

Спасибо за фрогги ,очень хорошо структурирует материал .

[@ВалерияХачатрян-м7щ]

Спасибо Вам огромное! Пришла с интервью с IT-борода, т.к. стало интересно. После пары видео поняла, что подача 10/10. Благодарна:3

[@fife3366]

За фроги спасибо, вери помогло! все ролики супер интересные !

[@prosto_razrabotka]

Спасибо -)

[@ДмитрийКолесников-ш2ф]

лайк за формат изучения!

[@dustfellsans9705]

Большое спасибо! Продолжайте в том же духе!

[@vladp5728]

Спасибо за проделанную работу. С нетерпением буду ждать следующих видео.

[@systemconnect3096]

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

[@Влад-Донцов]

это чертовски огромная благотворительность

[@nikara25]

Спасибо за урок и за игру! Можете подсказать еще парочку таких игр, пожалуйста? Очень интересно поиграть))

[@slavasemushin]

Спасибо! Для совсем начинающих сложно. Например, вы добавили flex-shrink: 0 и не объяснили почему это так работает. Пришлось ставить на паузу и идти смотреть видео об этом свойстве, чтобы понять почему это нам помогло. Или еще вы использовали свойство flex: 1 0 auto -- если бы написали в три свойства было бы проще понять, а так вы проговорили я сразу же забыл весь порядок. Надеюсь, вам поможет мой отзыв ведь, когда смотрящие видео вынуждены уходить в гугл и на другие каналы, то.. они ведь могут и не вернуться ;)

[@KrasavchikSelivan]

Уходить в гугл - совершенно нормально, всегда полезно черпать инфу из разных источников

[@quelish446]

@@KrasavchikSelivan Полностью поддерживаю!

[@Magnetar_Mind_Booster]

​ Quelish 3:43 Автор рассказывает о свойстве flex-shrink. Вы внимательно смотрели ролик?

[@Eternal581]

Благодарю! Вы прекрасный учитель!

[@prosto_razrabotka]

Спасибо

[@HomeBog]

Отличная подача материала. Спасибо за канал и уроки! Удачи!

[@xakepp35]

Показательный гайд, лайк. Остались вопросы. 1. Как сделать футер снизу экрана (а не документа) при высоком контенте? 2. Почему шапка внутри контента? 3. Как сделать шапку приклееной к верху при высоком контенте, скрывать при скролле вниз, показывать при скролле вверх?

[@prosto_razrabotka]

1. position: fixed 2. это просто контейнер, называйте его как угодно 3. так же, как и пункт 1, но уже с добавлением js, если хочется именно прятать при одном направлении и показывать в другом

[@ДенисМальцев-м8м]

Спасибо Виталий , игру flex froggy по вашему совету покодил , говорю как есть сложности были на 24 уровне , но вернулся к вашей шпаргалке и прошел , спасибо )

[@ivanbag9741]

Спасибо за хороший ролик!!!

[@vmedinsky]

предлагаю выпускать и по js ролики, желательно не только junior уровня, а что-нибудь интересное и неизвестное, или новое, и равномерно как-то выпускать 1 верстка 1 js к примеру

[@prosto_razrabotka]

Интересное предложение. Спасибо.

[@cyraxkillallx6677]

Бро огромное спасибо, за объяснение + после игры стало все понятно, по полочкам разложилось, до этого смотрел кучу видео, ничего не получалось.

[@prosto_razrabotka]

Спасибо -)

[@aleksyantkiewicz4369]

Разжевывание информации еще не на уровне Хауди Хо, но видно как автор очень старается! СПАСИБО ВАМ ОГРОМНОЕ ЗА УЧЕБУ!

[@imgubish]

Капитальный красавчик! Как по мне - один из лучших каналов русскоязычного ютюба по этой теме. /* за отсутствие дефектов речи отдельный лайк */

[@prosto_razrabotka]

Я работаю над собой -) Но иногда, всё же, встречаются)

[@imgubish]

иногда - это норма) главное, что приятно смотреть и слушать + от просмотра определенно есть польза🙌 p.s.: я конкретно подсел на этот канал 🤫

[@placid3495]

Очень здорово! Понятно и доступно

[@Vindly]

Отличная подача материала. Спасибо!

[@ИгорьГорбунов-ю9ж]

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

[@allen_sr904]

Большое спасибо за урок!

[@andrewdaa3176]

Виталий, приветствую вас! Хочу поблагодарить за доступное объяснение о флексбоксе в данном видео! как бы поучиться у вас и сменить место работы.....

[@dbuzeninka8005]

Виталик, отличная идея для целого плейлиста : Делай мини-гайды по разным елементам сайта - галерея, видео на фоне, паралакс , карусель и т.д. Смылсл в том, что видео на 8 минут будет конкретно про какой-то елемент сайта . Я думаю будет дикая популярность в рунете, так как Ютуб кишит видосами типа "учим html теги " для новичков , а вот для "среднячков " инфы очень мало типа "настройка контакт формы" или паралаксы всякие.

[@prosto_razrabotka]

С этого нельзя было начинать канал, был бы взрыв мозга и непонимание. Темы записал)

[@dbuzeninka8005]

@@prosto_razrabotka спасибо за понимание !) На твоём канале приятно находится т.к. ты держишь связь с подписчиками! :) Я , кстати, с тобой не с самого первого видео , но где-то с 4-го ))))

[@danuiachimovschi9791]

i am from moldova chisinau i like learn with you info about front-end developer you are good man good look

[@Maryfeb1]

За игрульку отдельное спасибо)

[@МиколаМироненко-з4т]

Супер! Спасибо Вам за Ваш труд!)

[@TheTaeke]

Разъяснил все по полочкам, спасибо!

[@kotdi78]

Все понятно и наглядно, подписался. Спасибо!

[@Andrey-bt5jm]

Спасибо большое за Ваше видео! Очень сильно помогло разобраться с флексами

[@ДаниилОсейкин-у1ж]

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

[@prosto_razrabotka]

Спасибо -)

[@bpv82]

Спасибо за видео, нужно практиковаться.

[@kuqmua755]

Неожиданно про игру в конце. Пойду проходить)

[@станиславпятницкий-т7б]

Спасибо, Виталий! Класс!!!

[@moviefokll]

Спасибо, очень полезно

[@GANGST1ER]

The Bald from IBM всё выпускает годноту.

[@КонстантинВасин-э2к]

Всё понятно и просто для пониманя, но в конце про товары ожидалось больше

[@eduardomavlyutov4710]

Спасибо большое за видео! По сравнению с флоатами флексбокс - это просто рай)

[@TheTexPro]

Спасибо! очень круто!

[@breeeeedTV]

мне как человеку знакомому с версткой , интересны мысли и подача , но для интерактива было бы круто добавить задания , с вариациями решений , а так же возможно разбор трендов,

[@АлександрМ-м9р]

Спасибо за урок,надеюсь не перестанете выпускать подобные ролики!.

[@Cinegami3]

огромное спасибо

[@MrIslamite]

Привет Виталий. Спасибо за видеоурок. Побольше лайкосиков в будущем 🤗. И старайся побороть тотальную ало*****. Ну короче ты понял 👊

[@glorykvo]

Огромное спасибо 👌🏿👍👍👍👍👍

[@gubin.konstantin]

два лайка этому господину!

[@prosto_razrabotka]

Спасибо -)

[@anatoliyburdasov4035]

Благодарен благодарен благодарен!))

[@kuqmua755]

лично я запомнил синтаксис :not(:first) после этого урока. спасибо

[@egoregoroff104]

спасибо!

[@stepannebykov6350]

От души!

[@prosto_razrabotka]

Душевно в душу -)

[@orcsamuro9687]

Годный канал

[@Алексей-ч5б1б]

Даже при помощи гугла, не сразу смог узнать, что упомянутое Вами слово шордхэнд (2:33) расшифровывается, как - условное обозначение. Может кому пригодится :)

[@АлександрЛипатов-х5о]

Ты молодец! С меня подписка))

[@Alex-hs8xj]

thanks

[@ВиталикЛещенко-т9м]

Виталя возвращайся)

[@petralebankova5997]

spasibo!!!

[@sbv89]

Хочу обратить Ваше внимание на следущае: такой HTML елемент как NAV во втором уроке не вспоминался и соотвецтвено новечку (мне) очень сложно воспринимаеться информация сейчас. Так же по возможности прошу в подобньіх роликах отказаться от сокращеньіх надписях (типу Flex: 1 0 auto) - также збивает с толку. В целом очень нравяться Ваши видео.

[@prosto_razrabotka]

Поэтому на канале есть видео по семантическим тэгам и детальный разбор всех свойств, относящихся к флексбоксу, чтобы такие как вы не «збивались» с толку

[@ДенисМальцев-м8м]

Пофлексим, спасибо за видео )

[@SecurKsb]

Лягухи улыбнули, над 25 задачкой пришлось попотеть, уложился в 3 строчки кода. ))

[@mirkeimar]

Для чего вы устанавливаете flex-shrink: 0; ? Если не установить его для футера, а для контента поставить просто flex-grow: 1; , то это же всё равно сработает?

[@sunnyorange8265]

Привет! Вы объясняете как боженька, жаль, что вы забросили канал. Надеюсь, у вас все нормально.

[@userbilas]

Спасибо)

[@delalen8012]

Спасибо за видео!) И отдельное спасибо зя лягушек - полезная вещь)

[@prosto_razrabotka]

Не за что -)

[@clickabelno]

Лайк и подписка!!

[@dinir1000]

Я правильно понимаю, что у флекс-элементов есть недостаток? это то, что элементы всегда находятся в некой связке с друг другом, и не могут выступать как отдельные ( независимые от других элементов блоки) то есть, мы не можем позиционировать отдельно взятый элемент (блок) в независимости от остальных, для этого наверное нужно создавать каждый раз отдельные родительские контейнеры, а это нагромаждение кода, вариант не очень) Это как игра в "Пятнашки"

[@MrGutory]

а правильно ли создавать для heder footer классы, по моему нет, для чего так делать? или это для броузеров не поддерживающих html5?

[@prosto_razrabotka]

1. хэдер и футер могут использоваться многократно 2. обращение по классу быстрее

[@MrGutory]

@@prosto_razrabotka ничего не понял в ответе :). в смысле многократно использоваться? несколько футеров что ли, зачем? что значит быстрее и зачем быстрее? не понимаю. сори если мои вопросы глупые :)

[@markmrak8991]

Может я чего то не понимаю но как применяется верстка? Допустим сверстал я сайт,сохранил,ок. Любой же сервис по созданию сайтов ,конструктор предлагает создавать только по готовым шаблонам ,тот же Wix или Tilda . Зачем нужна тогда верстка? или может существуют хостинги или конструкторы сайтов для верстки сайтов вручную?

[@yuriiy7180]

Всё понятно и просто, но есть такой момент если в список элементов добавить 5 элемент он окажется в конце строки из за того что в родителя justify-content: space-between, для вывода карточек товара нескольких в ряд (или статей и тому подобного ) это решение не подойдет

[@prosto_razrabotka]

Согласен. Пытался сделать случайное кол-во элементов и промазал)) Но это очень легко решается, если например отказаться от space-between и переделать на отступы на margin, например так - codepen.io/vitaliy_kirenkov/pen/voYoOv И в целом плясать от задачи.

[@-Earth-777]

Добрый времени суток. Заменяет ли это свойство Float?

[@prosto_razrabotka]

Нет, флоат по прежнему решает свои задачи

[@mohawberel]

Спасибо за полезный линк на игру с лягушками

[@iharsaulich3155]

Здравствуйте. Ребята в этом видио на ~13мин. была сокращённая запись (ul>li>a ) А где можно подробней почитать о таких возможностях. PS. Спасибо

[@prosto_razrabotka]

Гуглите Emmet. Он сейчас встроен во все редакторы (или почти все -))

[@iharsaulich3155]

Благодарю.

[@ДимарикЧувашев]

ща затестим

[@andymonoter2749]

Я наверное упустил или был невнимателен, скажите пожалуйста еще раз: когда я применяю свойство display: flex это значит что элементы которые были блочными (block) становятся строчными (inline) ? или блочно-строчными (inline-block)? или они просто становятся флексовыми ? на 9:00 мин ролика автор говорит,что элементы встали в ряд. просто на том моменте когда они встали в ряд я не понял, то ли они стали строчными то ли они стали флексовыми, в какой вид они преобразовались ? не могу понять. Пожалуйста ,объясните.

[@antonshyshlakov1533]

display: flex; делает все дочерние элементы резиновыми - flex, а не инлайновыми или блочными, как было изначально.

[@example6963]

А можно ведь футер прибить к низу используя float: bottom; ?

[@qwe-rty-]

Float - это обтекаемость, а не расположение, так нельзя написать. Просто такого значения нет

[@bearbullc]

а чем отличается меню просто 1 2 3 от использование списков? 1 2 3 а то часто вижу,что ютуберы айтишники юзают именно первый вариант

[@prosto_razrabotka]

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

[@user-hv8rh8nk9d]

Зачем ссылки делать display: block? На что это влияет и как меняется вид без этой записи(display: block)? Речь идёт о ссылках в хэдере в меню.

[@uvy.studios]

У блочных элементов margin и padding работает как в лево-право, так и вверх-вниз. В то время как у строчных, только лево-право.

[@user-hv8rh8nk9d]

IVNFF Corp спасибо

[@maksimtroshkov173]

Спасибо за такой качественный контент! Круто, что помимо теории и практики ты показываешь те моменты, которые часто необходимы в реальных проектах! Есть вопрос: ты сказал, что flex-grow противоположен flex-shrink- есть ли принципиальная разница: указывать элементу flex-grow:0 или flex-shrink:1?

[@prosto_razrabotka]

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

[@qwe-rty-]

Супер, а будет что-нибудь похожее по гридам??

[@prosto_razrabotka]

На канале появился CSS Grid. kzbin.info/www/bejne/ZqSofJWsnr9sbK8

[@qwe-rty-]

@@prosto_razrabotka Спасибо огромное

[@Betularaaa]

@@prosto_razrabotka видео с ограниченным доступом

[@Magnetar_Mind_Booster]

╔╗╔╗╔╗╦╗ ║╦║║║║║║ ╚╝╚╝╚╝╩╝ Автору Respect. Теперь буду писать комментарии под каждым просмотренным роликом, чтобы помочь продвигать в тренды Utube. Хочется, чтобы больше людей имели возможность потреблять действительно качественный контент.

[@prosto_razrabotka]

Спасибо. Приятно слышать -)

[@theirishman9537]

интересно, после этого стоит смотреть дальше ?

[@vasyapoteryajko5267]

Кошерная игрулина про лягушат)

[@I-PixALbI4-I]

Я совершенно не понял про order.... не могу теперь игру пройти.

[@prosto_razrabotka]

Поэтому в плейлисте есть детальный разбор каждого свойства в качестве шпаргалки

[@I-PixALbI4-I]

@@prosto_razrabotka Я зашёл на WebReference и посмотрел как его записывать. Моя ошибка была в том что я не знал как записывать его записывал не правильно. Теперь я застрял на flex-flow)xD буду разбираться дальше) Спасибо за видео кстати!

[@martDKNY]

Пишите пожалуйста текст сначала, не брезгуйте дублями

[@martDKNY]

а также ! для кодпена, это полезно

[@МастерМаргарита-т1ч]

спасибо!

[@GamesServices]

Thanks