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

  Переглядів 60,046

Просто: разработка

Просто: разработка

5 років тому

В данном видео: разбор теоретической части флексбокса, свойства элементов и контейнера, практика на примере вёрстки элементов, которые используются почти на любом сайте.
Как сделать сайт с нуля, видео посвящено именно этому вопросу. Существуем множество стандартов верстки сайтов, и если вы хотите узнать, как делается верстка сайта самостоятельно, то подписывайтесь на канал. Здесь вас ждет много полезного контента, который поможет найти ответ на вопрос, как делать верстку сайта. Сегодня у нас уроки flexbox практика. Разберемся как делается верстка с помощью flexbox. Узнаем про использование flexbox плюсы и минусы данного инструмента. Поговорим про свойства flexbox, flexbox контейнер, и как делается верстка сайта на flexbox. Разберем некоторые css flexbox примеры. В общем я думаю получилось небольшое flexbox руководство. Ели вы хотите, что бы flexbox уроки выходили чаще, пишите об этом в комментарии, возможно мы еще сделаем ролики на эту тему.
=======================================
Игра для практики CSS свойств Flexbox - bit.ly/2MyeIxB
=======================================
Подписывайтесь на группу "Программист" в ВК
- bit.ly/32AUybU

КОМЕНТАРІ: 129
@prosto_razrabotka
@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/
@smodiffnya
@smodiffnya 4 роки тому
Пойду флексить
@robinzon___4178
@robinzon___4178 3 роки тому
ахаххаха )))))))))))))
@braivs
@braivs 3 роки тому
Понравилось руководство. Практичное. Мотивирует самому верстать.
@tohoto2183
@tohoto2183 4 роки тому
Спасибо за фрогги ,очень хорошо структурирует материал .
@slavasemushin
@slavasemushin 4 роки тому
Спасибо! Для совсем начинающих сложно. Например, вы добавили flex-shrink: 0 и не объяснили почему это так работает. Пришлось ставить на паузу и идти смотреть видео об этом свойстве, чтобы понять почему это нам помогло. Или еще вы использовали свойство flex: 1 0 auto -- если бы написали в три свойства было бы проще понять, а так вы проговорили я сразу же забыл весь порядок. Надеюсь, вам поможет мой отзыв ведь, когда смотрящие видео вынуждены уходить в гугл и на другие каналы, то.. они ведь могут и не вернуться ;)
@KrasavchikSelivan
@KrasavchikSelivan 4 роки тому
Уходить в гугл - совершенно нормально, всегда полезно черпать инфу из разных источников
@quelish446
@quelish446 4 роки тому
@@KrasavchikSelivan Полностью поддерживаю!
@ne_psixyu
@ne_psixyu 4 роки тому
​ Quelish 3:43 Автор рассказывает о свойстве flex-shrink. Вы внимательно смотрели ролик?
@systemconnect3096
@systemconnect3096 5 років тому
продолжай дальше делать плейлист по флексам, обязательно! у тебя классно получается объяснять. интересно как делать колонки определенной ширины, и чтоб адаптив был. жду следующих серий, класс!
@define_by
@define_by 4 роки тому
предлагаю выпускать и по js ролики, желательно не только junior уровня, а что-нибудь интересное и неизвестное, или новое, и равномерно как-то выпускать 1 верстка 1 js к примеру
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Интересное предложение. Спасибо.
@vladp5728
@vladp5728 5 років тому
Спасибо за проделанную работу. С нетерпением буду ждать следующих видео.
@user-fd3ei5fd1v
@user-fd3ei5fd1v 3 роки тому
Спасибо Вам огромное! Пришла с интервью с IT-борода, т.к. стало интересно. После пары видео поняла, что подача 10/10. Благодарна:3
@Eternal581
@Eternal581 3 роки тому
Благодарю! Вы прекрасный учитель!
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Спасибо
@nickudo3721
@nickudo3721 3 роки тому
Какой же ты молодец! два дня потратил на правку чужого кода, а как посмотрел твой видос переписал все за пол дня на флексах и нарадоваться не могу!!
@HomeBog
@HomeBog 4 роки тому
Отличная подача материала. Спасибо за канал и уроки! Удачи!
@TheTaeke
@TheTaeke 4 роки тому
Разъяснил все по полочкам, спасибо!
@kotdi78
@kotdi78 5 років тому
Все понятно и наглядно, подписался. Спасибо!
@bpv82
@bpv82 4 роки тому
Спасибо за видео, нужно практиковаться.
@user-jz5yz7ii1p
@user-jz5yz7ii1p 4 роки тому
Спасибо, Виталий! Класс!!!
@Vindly
@Vindly 3 роки тому
Отличная подача материала. Спасибо!
@artemo9565
@artemo9565 4 роки тому
Супер! хоть кто-то дал отличный урок новичку, как прикрепить футер к низу без костылей. Да и вообще отличный урок о флексбоксах. Спасибо Виталий!
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Благодарю
@user-mo6jz3dj2j
@user-mo6jz3dj2j 3 роки тому
лайк за формат изучения!
@TheTexPro
@TheTexPro 4 роки тому
Спасибо! очень круто!
@fife3366
@fife3366 3 роки тому
За фроги спасибо, вери помогло! все ролики супер интересные !
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Спасибо -)
@allen_sr904
@allen_sr904 4 роки тому
Большое спасибо за урок!
@placid3495
@placid3495 3 роки тому
Очень здорово! Понятно и доступно
@kuqmua755
@kuqmua755 4 роки тому
Неожиданно про игру в конце. Пойду проходить)
@user-bi3kx5uf6d
@user-bi3kx5uf6d 3 роки тому
это чертовски огромная благотворительность
@user-rk5mu8uv6s
@user-rk5mu8uv6s 3 роки тому
Супер! Спасибо Вам за Ваш труд!)
@dustfellsans9705
@dustfellsans9705 2 роки тому
Большое спасибо! Продолжайте в том же духе!
@user-lm6ls7nz2z
@user-lm6ls7nz2z 4 роки тому
Спасибо Виталий , игру flex froggy по вашему совету покодил , говорю как есть сложности были на 24 уровне , но вернулся к вашей шпаргалке и прошел , спасибо )
@user-pn2ev2je2l
@user-pn2ev2je2l 3 роки тому
Благодарю Вас за видео.
@ivanbag9741
@ivanbag9741 2 роки тому
Спасибо за хороший ролик!!!
@cyraxkillallx6677
@cyraxkillallx6677 4 роки тому
Бро огромное спасибо, за объяснение + после игры стало все понятно, по полочкам разложилось, до этого смотрел кучу видео, ничего не получалось.
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Спасибо -)
@glorykvo
@glorykvo 4 роки тому
Огромное спасибо 👌🏿👍👍👍👍👍
@user-dg1sw8ru9w
@user-dg1sw8ru9w 5 років тому
Всё понятно и просто для пониманя, но в конце про товары ожидалось больше
@andrewdaa3176
@andrewdaa3176 4 роки тому
Виталий, приветствую вас! Хочу поблагодарить за доступное объяснение о флексбоксе в данном видео! как бы поучиться у вас и сменить место работы.....
@user-yf6xe2tm1x
@user-yf6xe2tm1x 4 роки тому
Спасибо за урок,надеюсь не перестанете выпускать подобные ролики!.
@Maryfeb1
@Maryfeb1 3 роки тому
За игрульку отдельное спасибо)
@moviefokll733
@moviefokll733 3 роки тому
Спасибо, очень полезно
@user-hf5xw6od7g
@user-hf5xw6od7g 4 роки тому
огромное спасибо
@Andrey-bt5jm
@Andrey-bt5jm 3 роки тому
Спасибо большое за Ваше видео! Очень сильно помогло разобраться с флексами
@egoregoroff104
@egoregoroff104 4 роки тому
спасибо!
@anatoliyburdasov4035
@anatoliyburdasov4035 4 роки тому
Благодарен благодарен благодарен!))
@userbilas
@userbilas 4 роки тому
Спасибо)
@user-im6zp3pw3x
@user-im6zp3pw3x 4 роки тому
Спасибо, очень классный видос
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Спасибо -)
@imgubish
@imgubish 4 роки тому
Капитальный красавчик! Как по мне - один из лучших каналов русскоязычного ютюба по этой теме. /* за отсутствие дефектов речи отдельный лайк */
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Я работаю над собой -) Но иногда, всё же, встречаются)
@imgubish
@imgubish 4 роки тому
иногда - это норма) главное, что приятно смотреть и слушать + от просмотра определенно есть польза🙌 p.s.: я конкретно подсел на этот канал 🤫
@aleksyantkiewicz4369
@aleksyantkiewicz4369 4 роки тому
Разжевывание информации еще не на уровне Хауди Хо, но видно как автор очень старается! СПАСИБО ВАМ ОГРОМНОЕ ЗА УЧЕБУ!
@eduardomavlyutov4710
@eduardomavlyutov4710 4 роки тому
Спасибо большое за видео! По сравнению с флоатами флексбокс - это просто рай)
@xakepp35
@xakepp35 4 роки тому
Показательный гайд, лайк. Остались вопросы. 1. Как сделать футер снизу экрана (а не документа) при высоком контенте? 2. Почему шапка внутри контента? 3. Как сделать шапку приклееной к верху при высоком контенте, скрывать при скролле вниз, показывать при скролле вверх?
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
1. position: fixed 2. это просто контейнер, называйте его как угодно 3. так же, как и пункт 1, но уже с добавлением js, если хочется именно прятать при одном направлении и показывать в другом
@user-ic4qh5vh1f
@user-ic4qh5vh1f 4 роки тому
Ты молодец! С меня подписка))
@user-lm6ls7nz2z
@user-lm6ls7nz2z 4 роки тому
Пофлексим, спасибо за видео )
@danuiachimovschi9791
@danuiachimovschi9791 3 роки тому
i am from moldova chisinau i like learn with you info about front-end developer you are good man good look
@kuqmua755
@kuqmua755 4 роки тому
лично я запомнил синтаксис :not(:first) после этого урока. спасибо
@GANGST1ER
@GANGST1ER 3 роки тому
The Bald from IBM всё выпускает годноту.
@MrIslamite
@MrIslamite 4 роки тому
Привет Виталий. Спасибо за видеоурок. Побольше лайкосиков в будущем 🤗. И старайся побороть тотальную ало*****. Ну короче ты понял 👊
@GamesServices
@GamesServices 3 роки тому
Thanks
@Alex-hs8xj
@Alex-hs8xj 4 роки тому
thanks
@orcsamuro9687
@orcsamuro9687 2 роки тому
Годный канал
@clickabelno
@clickabelno 4 роки тому
Лайк и подписка!!
@petralebankova5997
@petralebankova5997 2 роки тому
spasibo!!!
@stepannebykov6350
@stepannebykov6350 4 роки тому
От души!
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Душевно в душу -)
@breeeeedTV
@breeeeedTV 4 роки тому
мне как человеку знакомому с версткой , интересны мысли и подача , но для интерактива было бы круто добавить задания , с вариациями решений , а так же возможно разбор трендов,
@user-qh7hu3el5y
@user-qh7hu3el5y 3 роки тому
ща затестим
@gubin.konstantin
@gubin.konstantin 3 роки тому
два лайка этому господину!
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Спасибо -)
@user-vr8qx9ww9n
@user-vr8qx9ww9n 4 роки тому
Даже при помощи гугла, не сразу смог узнать, что упомянутое Вами слово шордхэнд (2:33) расшифровывается, как - условное обозначение. Может кому пригодится :)
@SecurKsb
@SecurKsb 3 роки тому
Лягухи улыбнули, над 25 задачкой пришлось попотеть, уложился в 3 строчки кода. ))
@dbuzeninka8005
@dbuzeninka8005 4 роки тому
Виталик, отличная идея для целого плейлиста : Делай мини-гайды по разным елементам сайта - галерея, видео на фоне, паралакс , карусель и т.д. Смылсл в том, что видео на 8 минут будет конкретно про какой-то елемент сайта . Я думаю будет дикая популярность в рунете, так как Ютуб кишит видосами типа "учим html теги " для новичков , а вот для "среднячков " инфы очень мало типа "настройка контакт формы" или паралаксы всякие.
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
С этого нельзя было начинать канал, был бы взрыв мозга и непонимание. Темы записал)
@dbuzeninka8005
@dbuzeninka8005 4 роки тому
@@prosto_razrabotka спасибо за понимание !) На твоём канале приятно находится т.к. ты держишь связь с подписчиками! :) Я , кстати, с тобой не с самого первого видео , но где-то с 4-го ))))
@delalen8012
@delalen8012 4 роки тому
Спасибо за видео!) И отдельное спасибо зя лягушек - полезная вещь)
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Не за что -)
@user-mf2we4gb8w
@user-mf2we4gb8w 2 роки тому
Виталя возвращайся)
@dinir1000
@dinir1000 4 роки тому
Я правильно понимаю, что у флекс-элементов есть недостаток? это то, что элементы всегда находятся в некой связке с друг другом, и не могут выступать как отдельные ( независимые от других элементов блоки) то есть, мы не можем позиционировать отдельно взятый элемент (блок) в независимости от остальных, для этого наверное нужно создавать каждый раз отдельные родительские контейнеры, а это нагромаждение кода, вариант не очень) Это как игра в "Пятнашки"
@sbv89
@sbv89 4 роки тому
Хочу обратить Ваше внимание на следущае: такой HTML елемент как NAV во втором уроке не вспоминался и соотвецтвено новечку (мне) очень сложно воспринимаеться информация сейчас. Так же по возможности прошу в подобньіх роликах отказаться от сокращеньіх надписях (типу Flex: 1 0 auto) - также збивает с толку. В целом очень нравяться Ваши видео.
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Поэтому на канале есть видео по семантическим тэгам и детальный разбор всех свойств, относящихся к флексбоксу, чтобы такие как вы не «збивались» с толку
@vladdrzd6484
@vladdrzd6484 3 роки тому
Спасибо за полезный линк на игру с лягушками
@sunnyorange8265
@sunnyorange8265 Рік тому
Привет! Вы объясняете как боженька, жаль, что вы забросили канал. Надеюсь, у вас все нормально.
@iharsaulich3155
@iharsaulich3155 4 роки тому
Здравствуйте. Ребята в этом видио на ~13мин. была сокращённая запись (ul>li>a ) А где можно подробней почитать о таких возможностях. PS. Спасибо
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Гуглите Emmet. Он сейчас встроен во все редакторы (или почти все -))
@iharsaulich3155
@iharsaulich3155 4 роки тому
Благодарю.
@yuriiy7180
@yuriiy7180 4 роки тому
Всё понятно и просто, но есть такой момент если в список элементов добавить 5 элемент он окажется в конце строки из за того что в родителя justify-content: space-between, для вывода карточек товара нескольких в ряд (или статей и тому подобного ) это решение не подойдет
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Согласен. Пытался сделать случайное кол-во элементов и промазал)) Но это очень легко решается, если например отказаться от space-between и переделать на отступы на margin, например так - codepen.io/vitaliy_kirenkov/pen/voYoOv И в целом плясать от задачи.
@qwe-rty-
@qwe-rty- 4 роки тому
Супер, а будет что-нибудь похожее по гридам??
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
На канале появился CSS Grid. ukposts.info/have/v-deo/aKN2f5itoJBql4E.html
@qwe-rty-
@qwe-rty- 4 роки тому
@@prosto_razrabotka Спасибо огромное
@user-rc4xo2bv4v
@user-rc4xo2bv4v 3 роки тому
@@prosto_razrabotka видео с ограниченным доступом
@-Earth-777
@-Earth-777 3 роки тому
Добрый времени суток. Заменяет ли это свойство Float?
@prosto_razrabotka
@prosto_razrabotka 3 роки тому
Нет, флоат по прежнему решает свои задачи
@ne_psixyu
@ne_psixyu 4 роки тому
╔╗╔╗╔╗╦╗ ║╦║║║║║║ ╚╝╚╝╚╝╩╝ Автору Respect. Теперь буду писать комментарии под каждым просмотренным роликом, чтобы помочь продвигать в тренды Utube. Хочется, чтобы больше людей имели возможность потреблять действительно качественный контент.
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Спасибо. Приятно слышать -)
@MrGutory
@MrGutory 4 роки тому
а правильно ли создавать для heder footer классы, по моему нет, для чего так делать? или это для броузеров не поддерживающих html5?
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
1. хэдер и футер могут использоваться многократно 2. обращение по классу быстрее
@MrGutory
@MrGutory 4 роки тому
@@prosto_razrabotka ничего не понял в ответе :). в смысле многократно использоваться? несколько футеров что ли, зачем? что значит быстрее и зачем быстрее? не понимаю. сори если мои вопросы глупые :)
@example6963
@example6963 4 роки тому
А можно ведь футер прибить к низу используя float: bottom; ?
@qwe-rty-
@qwe-rty- 4 роки тому
Float - это обтекаемость, а не расположение, так нельзя написать. Просто такого значения нет
@markmrak8991
@markmrak8991 3 роки тому
Может я чего то не понимаю но как применяется верстка? Допустим сверстал я сайт,сохранил,ок. Любой же сервис по созданию сайтов ,конструктор предлагает создавать только по готовым шаблонам ,тот же Wix или Tilda . Зачем нужна тогда верстка? или может существуют хостинги или конструкторы сайтов для верстки сайтов вручную?
@andymonoter2749
@andymonoter2749 4 роки тому
Я наверное упустил или был невнимателен, скажите пожалуйста еще раз: когда я применяю свойство display: flex это значит что элементы которые были блочными (block) становятся строчными (inline) ? или блочно-строчными (inline-block)? или они просто становятся флексовыми ? на 9:00 мин ролика автор говорит,что элементы встали в ряд. просто на том моменте когда они встали в ряд я не понял, то ли они стали строчными то ли они стали флексовыми, в какой вид они преобразовались ? не могу понять. Пожалуйста ,объясните.
@antonshyshlakov1533
@antonshyshlakov1533 4 роки тому
display: flex; делает все дочерние элементы резиновыми - flex, а не инлайновыми или блочными, как было изначально.
@mirkeimar
@mirkeimar 2 роки тому
Для чего вы устанавливаете flex-shrink: 0; ? Если не установить его для футера, а для контента поставить просто flex-grow: 1; , то это же всё равно сработает?
@hellohello-tu6yi
@hellohello-tu6yi 4 роки тому
а чем отличается меню просто 1 2 3 от использование списков? 1 2 3 а то часто вижу,что ютуберы айтишники юзают именно первый вариант
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Во втором варианте больше контроля. Особенно это заметно, если у меню есть буллеты (кружочки/крестики), которые разделяют их. Если использовать первый вариант, то эти элементы становятся кликабельными, что неверно. Во втором же варианте такой проблемы не возникает.
@maksimtroshkov173
@maksimtroshkov173 4 роки тому
Спасибо за такой качественный контент! Круто, что помимо теории и практики ты показываешь те моменты, которые часто необходимы в реальных проектах! Есть вопрос: ты сказал, что flex-grow противоположен flex-shrink- есть ли принципиальная разница: указывать элементу flex-grow:0 или flex-shrink:1?
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Да, есть. Сейчас я начал серию видео с обзором свойств флексбокса, где подробно разберу каждое из них.
@user-hv8rh8nk9d
@user-hv8rh8nk9d 3 роки тому
Зачем ссылки делать display: block? На что это влияет и как меняется вид без этой записи(display: block)? Речь идёт о ссылках в хэдере в меню.
@FoldyH3ro
@FoldyH3ro 3 роки тому
У блочных элементов margin и padding работает как в лево-право, так и вверх-вниз. В то время как у строчных, только лево-право.
@user-hv8rh8nk9d
@user-hv8rh8nk9d 3 роки тому
IVNFF Corp спасибо
@user-hh7cy8tr6h
@user-hh7cy8tr6h 4 роки тому
Я совершенно не понял про order.... не могу теперь игру пройти.
@prosto_razrabotka
@prosto_razrabotka 4 роки тому
Поэтому в плейлисте есть детальный разбор каждого свойства в качестве шпаргалки
@user-hh7cy8tr6h
@user-hh7cy8tr6h 4 роки тому
@@prosto_razrabotka Я зашёл на WebReference и посмотрел как его записывать. Моя ошибка была в том что я не знал как записывать его записывал не правильно. Теперь я застрял на flex-flow)xD буду разбираться дальше) Спасибо за видео кстати!
@vasyapoteryajko5267
@vasyapoteryajko5267 4 роки тому
Кошерная игрулина про лягушат)
@theirishman9537
@theirishman9537 4 роки тому
интересно, после этого стоит смотреть дальше ?
@martDKNY
@martDKNY 4 роки тому
Пишите пожалуйста текст сначала, не брезгуйте дублями
@martDKNY
@martDKNY 4 роки тому
а также ! для кодпена, это полезно
@user-iq7gv1oq2h
@user-iq7gv1oq2h 3 роки тому
спасибо!
ВСЁ, что нужно знать о CSS Селекторах. Типы селекторы css
42:23
Просто: разработка
Переглядів 55 тис.
Самый большой бутер в столовке! @krus-kos
00:42
Кушать Хочу
Переглядів 6 млн
Артем Пивоваров х Klavdia Petrivna - Барабан
03:16
Artem Pivovarov
Переглядів 1,5 млн
Китайка и Хеликоптер😂😆
00:18
KITAYKA
Переглядів 1,3 млн
CSS свойствах необходимые начинающему / CSS уроки
49:48
Просто: разработка
Переглядів 87 тис.
flex / flex basis, flex grow и flex-shrink из модуля флексбокс / flexbox уроки
10:19
Responsive web design in 37 minutes + layout. You don’t need Bootstrap!
36:44
Фрілансер по життю
Переглядів 1 млн
300 Сайдбаров ► Как сверстать структуру сайта?
26:13
Хауди Хо™ - Просто о мире IT!
Переглядів 406 тис.
Вёрстка по сетке на flexbox + интерактивный тренажёр
19:53
Самый большой бутер в столовке! @krus-kos
00:42
Кушать Хочу
Переглядів 6 млн