Практическое изучение основ Flexbox. Использование flexbox. flexbox верстка макета
ฝัง
- เผยแพร่เมื่อ 28 ก.ย. 2024
- В данном видео: разбор теоретической части флексбокса, свойства элементов и контейнера, практика на примере вёрстки элементов, которые используются почти на любом сайте.
Как сделать сайт с нуля, видео посвящено именно этому вопросу. Существуем множество стандартов верстки сайтов, и если вы хотите узнать, как делается верстка сайта самостоятельно, то подписывайтесь на канал. Здесь вас ждет много полезного контента, который поможет найти ответ на вопрос, как делать верстку сайта. Сегодня у нас уроки flexbox практика. Разберемся как делается верстка с помощью flexbox. Узнаем про использование flexbox плюсы и минусы данного инструмента. Поговорим про свойства flexbox, flexbox контейнер, и как делается верстка сайта на flexbox. Разберем некоторые css flexbox примеры. В общем я думаю получилось небольшое flexbox руководство. Ели вы хотите, что бы flexbox уроки выходили чаще, пишите об этом в комментарии, возможно мы еще сделаем ролики на эту тему.
=======================================
Игра для практики CSS свойств Flexbox - bit.ly/2MyeIxB
=======================================
Подписывайтесь на группу "Программист" в ВК
- bit.ly/32AUybU
Не забудьте заглянуть сюда:
❓ Запись на консультацию - 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/
Пойду флексить
ахаххаха )))))))))))))
продолжай дальше делать плейлист по флексам, обязательно! у тебя классно получается объяснять. интересно как делать колонки определенной ширины, и чтоб адаптив был. жду следующих серий, класс!
Понравилось руководство. Практичное. Мотивирует самому верстать.
Супер! хоть кто-то дал отличный урок новичку, как прикрепить футер к низу без костылей. Да и вообще отличный урок о флексбоксах. Спасибо Виталий!
Благодарю
Отличная подача материала. Спасибо за канал и уроки! Удачи!
Спасибо за урок и за игру! Можете подсказать еще парочку таких игр, пожалуйста? Очень интересно поиграть))
Разъяснил все по полочкам, спасибо!
лайк за формат изучения!
Разжевывание информации еще не на уровне Хауди Хо, но видно как автор очень старается!
СПАСИБО ВАМ ОГРОМНОЕ ЗА УЧЕБУ!
Благодарю Вас за видео.
За игрульку отдельное спасибо)
Неожиданно про игру в конце. Пойду проходить)
Спасибо! очень круто!
Спасибо большое за видео! По сравнению с флоатами флексбокс - это просто рай)
Годный канал
предлагаю выпускать и по js ролики, желательно не только junior уровня, а что-нибудь интересное и неизвестное, или новое, и равномерно как-то выпускать 1 верстка 1 js к примеру
Интересное предложение. Спасибо.
Привет! Вы объясняете как боженька, жаль, что вы забросили канал. Надеюсь, у вас все нормально.
Лягухи улыбнули, над 25 задачкой пришлось попотеть, уложился в 3 строчки кода. ))
Лайк и подписка!!
Спасибо за видео!) И отдельное спасибо зя лягушек - полезная вещь)
Не за что -)
Всё понятно и просто, но есть такой момент если в список элементов добавить 5 элемент он окажется в конце строки из за того что в родителя justify-content: space-between, для вывода карточек товара нескольких в ряд (или статей и тому подобного ) это решение не подойдет
Согласен. Пытался сделать случайное кол-во элементов и промазал)) Но это очень легко решается, если например отказаться от space-between и переделать на отступы на margin, например так - codepen.io/vitaliy_kirenkov/pen/voYoOv
И в целом плясать от задачи.
А можно ведь футер прибить к низу используя float: bottom; ?
Float - это обтекаемость, а не расположение, так нельзя написать. Просто такого значения нет
Я совершенно не понял про order.... не могу теперь игру пройти.
Поэтому в плейлисте есть детальный разбор каждого свойства в качестве шпаргалки
@@prosto_razrabotka Я зашёл на WebReference и посмотрел как его записывать. Моя ошибка была в том что я не знал как записывать его записывал не правильно. Теперь я застрял на flex-flow)xD буду разбираться дальше)
Спасибо за видео кстати!
Спасибо за проделанную работу. С нетерпением буду ждать следующих видео.
Для чего вы устанавливаете flex-shrink: 0; ? Если не установить его для футера, а для контента поставить просто flex-grow: 1; , то это же всё равно сработает?
Виталя возвращайся)
Спасибо! Для совсем начинающих сложно. Например, вы добавили flex-shrink: 0 и не объяснили почему это так работает. Пришлось ставить на паузу и идти смотреть видео об этом свойстве, чтобы понять почему это нам помогло. Или еще вы использовали свойство flex: 1 0 auto -- если бы написали в три свойства было бы проще понять, а так вы проговорили я сразу же забыл весь порядок. Надеюсь, вам поможет мой отзыв ведь, когда смотрящие видео вынуждены уходить в гугл и на другие каналы, то.. они ведь могут и не вернуться ;)
Уходить в гугл - совершенно нормально, всегда полезно черпать инфу из разных источников
@@KrasavchikSelivan Полностью поддерживаю!
Quelish 3:43 Автор рассказывает о свойстве flex-shrink. Вы внимательно смотрели ролик?
Может я чего то не понимаю но как применяется верстка? Допустим сверстал я сайт,сохранил,ок. Любой же сервис по созданию сайтов ,конструктор предлагает создавать только по готовым шаблонам ,тот же Wix или Tilda . Зачем нужна тогда верстка? или может существуют хостинги или конструкторы сайтов для верстки сайтов вручную?
Я правильно понимаю, что у флекс-элементов есть недостаток? это то, что элементы всегда находятся в некой связке с друг другом, и не могут выступать как отдельные ( независимые от других элементов блоки) то есть, мы не можем позиционировать отдельно взятый элемент (блок) в независимости от остальных, для этого наверное нужно создавать каждый раз отдельные родительские контейнеры, а это нагромаждение кода, вариант не очень) Это как игра в "Пятнашки"
╔╗╔╗╔╗╦╗
║╦║║║║║║
╚╝╚╝╚╝╩╝
Автору Respect. Теперь буду писать комментарии под каждым просмотренным роликом, чтобы помочь продвигать в тренды Utube. Хочется, чтобы больше людей имели возможность потреблять действительно качественный контент.
Спасибо. Приятно слышать -)
Спасибо за фрогги ,очень хорошо структурирует материал .
Спасибо Вам огромное! Пришла с интервью с IT-борода, т.к. стало интересно. После пары видео поняла, что подача 10/10. Благодарна:3
Кошерная игрулина про лягушат)
Спасибо за полезный линк на игру с лягушками
Спасибо Виталий , игру flex froggy по вашему совету покодил , говорю как есть сложности были на 24 уровне , но вернулся к вашей шпаргалке и прошел , спасибо )
За фроги спасибо, вери помогло! все ролики супер интересные !
Спасибо -)
The Bald from IBM всё выпускает годноту.
Даже при помощи гугла, не сразу смог узнать, что упомянутое Вами слово шордхэнд (2:33) расшифровывается, как - условное обозначение.
Может кому пригодится :)
Хочу обратить Ваше внимание на следущае: такой HTML елемент как NAV во втором уроке не вспоминался и соотвецтвено новечку (мне) очень сложно воспринимаеться информация сейчас. Так же по возможности прошу в подобньіх роликах отказаться от сокращеньіх надписях (типу Flex: 1 0 auto) - также збивает с толку. В целом очень нравяться Ваши видео.
Поэтому на канале есть видео по семантическим тэгам и детальный разбор всех свойств, относящихся к флексбоксу, чтобы такие как вы не «збивались» с толку
Большое спасибо! Продолжайте в том же духе!
Спасибо за урок,надеюсь не перестанете выпускать подобные ролики!.
Спасибо за хороший ролик!!!
Спасибо за видео, нужно практиковаться.
Добрый времени суток. Заменяет ли это свойство Float?
Нет, флоат по прежнему решает свои задачи
Thanks
thanks
Виталий, приветствую вас!
Хочу поблагодарить за доступное объяснение о флексбоксе в данном видео!
как бы поучиться у вас и сменить место работы.....
ща затестим
а правильно ли создавать для heder footer классы, по моему нет, для чего так делать? или это для броузеров не поддерживающих html5?
1. хэдер и футер могут использоваться многократно
2. обращение по классу быстрее
@@prosto_razrabotka ничего не понял в ответе :). в смысле многократно использоваться? несколько футеров что ли, зачем? что значит быстрее и зачем быстрее? не понимаю. сори если мои вопросы глупые :)
а чем отличается меню просто
1
2
3
от использование списков?
1
2
3
а то часто вижу,что ютуберы айтишники юзают именно первый вариант
Во втором варианте больше контроля.
Особенно это заметно, если у меню есть буллеты (кружочки/крестики), которые разделяют их. Если использовать первый вариант, то эти элементы становятся кликабельными, что неверно. Во втором же варианте такой проблемы не возникает.
Зачем ссылки делать display: block? На что это влияет и как меняется вид без этой записи(display: block)?
Речь идёт о ссылках в хэдере в меню.
У блочных элементов margin и padding работает как в лево-право, так и вверх-вниз. В то время как у строчных, только лево-право.
IVNFF Corp спасибо
i am from moldova chisinau
i like learn with you info about front-end developer
you are good man
good look
Благодарю! Вы прекрасный учитель!
Спасибо
spasibo!!!
спасибо!
Спасибо, Виталий! Класс!!!
два лайка этому господину!
Спасибо -)
Какой же ты молодец! два дня потратил на правку чужого кода, а как посмотрел твой видос переписал все за пол дня на флексах и нарадоваться не могу!!
Все понятно и наглядно, подписался. Спасибо!
Привет Виталий. Спасибо за видеоурок. Побольше лайкосиков в будущем 🤗. И старайся побороть тотальную ало*****. Ну короче ты понял 👊
Отличная подача материала. Спасибо!
спасибо!
мне как человеку знакомому с версткой , интересны мысли и подача , но для интерактива было бы круто добавить задания , с вариациями решений , а так же возможно разбор трендов,
лично я запомнил синтаксис :not(:first) после этого урока. спасибо
Пофлексим, спасибо за видео )
это чертовски огромная благотворительность
Спасибо, очень классный видос
Спасибо -)
Огромное спасибо 👌🏿👍👍👍👍👍
Всё понятно и просто для пониманя, но в конце про товары ожидалось больше
Показательный гайд, лайк. Остались вопросы.
1. Как сделать футер снизу экрана (а не документа) при высоком контенте?
2. Почему шапка внутри контента?
3. Как сделать шапку приклееной к верху при высоком контенте, скрывать при скролле вниз, показывать при скролле вверх?
1. position: fixed
2. это просто контейнер, называйте его как угодно
3. так же, как и пункт 1, но уже с добавлением js, если хочется именно прятать при одном направлении и показывать в другом
Ты молодец! С меня подписка))
Очень здорово! Понятно и доступно
Супер! Спасибо Вам за Ваш труд!)
Я наверное упустил или был невнимателен, скажите пожалуйста еще раз: когда я применяю свойство display: flex это значит что элементы которые были блочными (block) становятся строчными (inline) ? или блочно-строчными (inline-block)? или они просто становятся флексовыми ? на 9:00 мин ролика автор говорит,что элементы встали в ряд. просто на том моменте когда они встали в ряд я не понял, то ли они стали строчными то ли они стали флексовыми, в какой вид они преобразовались ? не могу понять. Пожалуйста ,объясните.
display: flex; делает все дочерние элементы резиновыми - flex, а не инлайновыми или блочными, как было изначально.
Большое спасибо за урок!
Спасибо, очень полезно
Благодарен благодарен благодарен!))
огромное спасибо
Бро огромное спасибо, за объяснение + после игры стало все понятно, по полочкам разложилось, до этого смотрел кучу видео, ничего не получалось.
Спасибо -)
Спасибо)
Виталик, отличная идея для целого плейлиста :
Делай мини-гайды по разным елементам сайта - галерея, видео на фоне, паралакс , карусель и т.д.
Смылсл в том, что видео на 8 минут будет конкретно про какой-то елемент сайта . Я думаю будет дикая популярность в рунете, так как Ютуб кишит видосами типа "учим html теги " для новичков , а вот для "среднячков " инфы очень мало типа "настройка контакт формы" или паралаксы всякие.
С этого нельзя было начинать канал, был бы взрыв мозга и непонимание.
Темы записал)
@@prosto_razrabotka спасибо за понимание !)
На твоём канале приятно находится т.к. ты держишь связь с подписчиками! :)
Я , кстати, с тобой не с самого первого видео , но где-то с 4-го ))))
Здравствуйте. Ребята в этом видио на ~13мин. была сокращённая запись (ul>li>a ) А где можно подробней почитать о таких возможностях.
PS. Спасибо
Гуглите Emmet. Он сейчас встроен во все редакторы (или почти все -))
Благодарю.
Капитальный красавчик! Как по мне - один из лучших каналов русскоязычного ютюба по этой теме. /* за отсутствие дефектов речи отдельный лайк */
Я работаю над собой -) Но иногда, всё же, встречаются)
иногда - это норма) главное, что приятно смотреть и слушать + от просмотра определенно есть польза🙌 p.s.: я конкретно подсел на этот канал 🤫
От души!
Душевно в душу -)
Спасибо большое за Ваше видео! Очень сильно помогло разобраться с флексами
Супер, а будет что-нибудь похожее по гридам??
На канале появился CSS Grid.
th-cam.com/video/0sEKbviZ96M/w-d-xo.html
@@prosto_razrabotka Спасибо огромное
@@prosto_razrabotka видео с ограниченным доступом
Спасибо за такой качественный контент! Круто, что помимо теории и практики ты показываешь те моменты, которые часто необходимы в реальных проектах! Есть вопрос: ты сказал, что flex-grow противоположен flex-shrink- есть ли принципиальная разница: указывать элементу flex-grow:0 или flex-shrink:1?
Да, есть. Сейчас я начал серию видео с обзором свойств флексбокса, где подробно разберу каждое из них.
Пишите пожалуйста текст сначала, не брезгуйте дублями
а также ! для кодпена, это полезно
интересно, после этого стоит смотреть дальше ?