FLEXBOX. Учимся верстать на флексах. Флексбокс уроки. Часть первая - свойства flex-контейнера
ฝัง
- เผยแพร่เมื่อ 27 พ.ค. 2024
- Начинаем учить верстку на флексах (flexbox )! Чтобы обучение было максимально эффективным я создал отдельный плейлист куда помещу целую серию выпусков. Последний из них будет полностью посвящен практическим примерам верстки на flex. В нем же ты получишь домашку и доступ к супер шпаргалке по FLEXBOX
Flexbox - это целый модуль, содержащий в себе набор свойств и их значений как для родителя flex-контейнера так и для его дочерних элементов flex-элементов. Основным преимуществом гибкой FLEX разметки является возможность изменять ширину/высоту пространство вокруг и порядок flex-элементов, для того чтобы наилучшим образом заполнить доступное пространство flex-контейнера
Весь плейлист по FLEXBOX
• FLEXBOX. Учимся верста...
0:00 - Вступление
0:18 - Подготовка к уроку
2:08 - display:flex
3:06 - display: inline-flex
3:59 - justufy-content
7:00 - align-items
9:39 - flex-wrap
Спасибо Emil Chapchakchi
Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle
Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
Instagram: / freelancer.lifestyle
Facebook: / freelancerlifestyle
Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
«Фрилансер по жизни». Живи, а работай в свободное время! ©
#фрилансерпожизни #обучение #верстка
Ценю твой ЛАЙК и КОММЕНТ!
Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle
Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
Instagram: instagram.com/freelancer.lifestyle/
Facebook: facebook.com/freelancerlifestyle/
Хэй, если не секрет, сколько в месяц имеешь с верстки?
Неохота говорить про бабки, я нормас зарабатываю на верстке ;)
@@FreelancerLifeStyleсвое жилье можно купить?) если да то как быстро?)
Я практиковался flex и grid на tailwind css спасибо
Добрий день, як називаєтся ваш канал де ви тільки кодите? не можу знайти....
0:00 - Подготовка к уроку
2:08 - display:flex
3:06 - display: inline-flex
3:59 - justify-content
7:00 - align-items
9:39 - flex-wrap
Огромное спасибо за урок!
Спасибо!
Якби ще "justify" правильно написав, було б ідеально! :)
Какой Вы приятный и умный педагог! Всех благ Вам! От души СПАСИБО за уроки!!!
Спасибо за видео. Очень всё понятно и интересно)
У justify-content появилось ещё одно значение: space-evenly. Оно похоже на space-around, только расстояния отступов одинаковые везде.
Он не учитель . он супер учитель . респект
👍
Разжевать более понятно - невозможно. Супер!
Этот урок должен был быть перед 14, там голову ломал при вёрстке как я мог пропустить флекс и не понятно ничего было.
В общем уроки реально очень крутые, первый раз пишу комментарии и смотрю их по несколько раз как минимум, спасибо за такой прекрасный курс.
Очень хорошая идея - разбить тему по флексам на небольшие тематические куски. Спасибо огромное.
Пожалуйста!
Блин, мужик, ты просто супер! Столько энергии и мотивации в твоих роликах!
Жека, ты делаешь этот мир лучше! Благодаря тебе, мне удается шаг за шагом продвигаться в изучении верстки
Смотрю ваше видео потому что бистро викладиваете и очень доступно. Ничего лишнего. Цените время того кто смотрит. Спасибо и респект!
Будь ласка!
Спасибо, Жека! Маленько бардак был в голове с этими флексами, а ты прям по полочкам там всё разложил!
Жека! Ты самый лучший!!! Огромное спасибо за твой труд!!!!!!
Пожалуйста!
Очень качественный контент, лайк, хоть и не новичок😁
Спасибо! Надеюсь в дальнейшем буду делать что-то интересное и для бывалых! 👍😎🤘
@@FreelancerLifeStyle жду)
Здравствуйте, можете посоветовать какие-нибудь книги или статья для web-программирования?
@@user-gy2ve7zk5i Web-программирование это очень обширное понятие, ты можешь сказать поточнее?
Ваш труд очень важен для нас! Мы вас ценим, спасибо огромное, вы человек с большой буквы
На столько грамотная постановка уроков удивляет. Ждем следующих уроков и практики верстки на флексах!
P.S. перехожу на более высокий уровень поддержки на патреоне, чего и всем желаю!)
😱😱😱 Спасибо большое! Это заряжжжаает!
Лучше чем Женя не объяснит никто!!! Очень наглядно и интересно! Каждый урок прохожу с удовольствием
все, я больше не могу это терпеть!!!!
я подписался на канал - он прекрасен)))
спасибо за прекрасные объяснения
И как Ваши успехи в обучении?
@@user-sk4vk8br4z а ваши?
@@angelika_vladimirskaya а ваши?
@@angelika_vladimirskaya а ваши как?
@@user-iu8xx1mv7t А вы как, устроились на высокооплачиваемую работу, или стали фрилансером?
Вот это я понимаю контент! Просто бомба пушка агонь 🤘
Спасибо! 😍👍
@@FreelancerLifeStyle Еще земля воздух и вода
@@user-tf2lp7jp5x Нет, у него воды нету!)
храни тебя вселенная, автор!
Как же здорово объясняешь! Просто огнище!!! Спасибо за это))
Дякую Євгеній, Ви прямо ЄвГЕНІЙ!
Спасибо! Строгая академичность изложения плюс эмоциональная подача. Не клонит в сон, и все по делу!
Огромная благодарность. Ты супер-учитель, вдохновитель.
Какой же крутой автор, Rolls Royce в среде уроков по верстке. Евгений, спасибо за урок!
Пожалуйста!
Это просто пушка!! Так все наглядно и подробно! Благодаря этому уроку я окончательно усвоил, как действует свойство flex для flex-контейнера! Спасибо! С нетерпением жду следующего урока
П.С. Вставка в начале с потрясающими видами заслуживает отдельного лайка! :D
Спасибо! Рад что старания замечают)
@@FreelancerLifeStyle этот флекс получается приминятся к адоптивно отзывчевой вёрстке? Всё не могу адоптивно отзывчевую вёрстку сделать нужно более подробно,месяц уже учусь на твоих видео суть понял проблема не могу сделать так чтобы сайт не ломался,тобишь то проблемы с футеро с помощью грида прижимал но при изминение разрешения экрана всё равно висит не опускается до конца
Привет. Я из будущего. Поделишься результами учебы программированию спустя 2 года?)
@@it-future5144 нет
блин там вначале у врапера невидно где закрывающий див находится
Спасибо за, максимально познавательный урок, разбавленный интересом, хорошей подачей и музыкой на фоне!
Спасибо тебе огромное за твои уроки, они очень информативные и легко усваиваются :D
Нарешті флекси) а то скільки роблю всього і не міг допетрати, що воно робить та як)) тепер за дуже короткий час все стало на свої місця! Жека, дуже дякую, дуже крутий контент!
Спасибо!!! Все круто, как всегда! Сейчас еще 3 видоса и буду верстать на флексах ))). Лайк однозначно! Я вообще не знаю кто ставит дизлайки под твоими видосами. Наверное, это те кто с умным видом рассказывают пургу часами, а толку от этого нет. Зачет тебе!
Спасибо что ты есть .
С новым годом 2021, Желаю тебе в этом году миллион подписчиков ))
Спасибо!))
Миллион подписчиков на патреоне лучше)))
@@pavelstepanov5941 ну, неплохо бы, да))
Классный урок! До это смотрел на лендинги и думал «А вот как это?», теперь все мало по малому становится ясным, спасибо!
Спасибо за работу. Лучший контент по вёрстке что я находил на рунете. Удачи в дальнейшем развитии канала!
круто, бодро, интересно! спасибо за такой полезный урок!!! уроки с Вами поднимают настроение!!!
Удивительно на сколько по-разному воспринимается материал после того как набираешься опыта. Когда смотрел в первый раз, ничего не запоминалось, мой мозг просто отказывался воспринимать информацию и запоминать свойства. А сейчас, смотрю, понятно абсолютно всё, материал кажется лёгким. Просто чудеса какие-то)
Ваши уроки мотивируют изучать все больше и больше. Спасибо Вам!
Супер! Я рад!
Недавно начал верстать PSD макеты, и появилась необходимость: использовать flexbox. И твои видео очень хорошо демонстрируют, как их использовать на практике.
Спасибо!
Мне подача понравилась - четко, с примерами, без воды. Буду дальше смотреть.
Супер!
Не знал про inline-flex, спасибо)
Спасибо, приятно учиться у профессионала!
Спасибо за уроки, Жека!!! Ну очень сильно помогают твои видео!
Не забувайте ставити вподобайки, це стимулює автора до створення нового контенту, який нам БЕЗКОШТОВНО надається для вивчення. Також не лініться коментувати, це сприяє просуванню каналу.
Всім миру.
очень неожиданно закончилось видео, и оно всё равно супер. пошёл смотреть следующее
Отличное объяснение ! Пришло понимание что и как и для чего. Спасибо !👍
под каждым видео буду писать спасибо большое! потому что реально оч много полезной инфы, разложенной по полочкам, наглядно и понятно, я в восторге!
Спасибо большое! Я очень рад что нравится!
Спасибо вам огромное за этот плейлист и шпаргалку!
Спасибо за труд! Очень лаконично и интересно.
Просто супер!!! Сколько видео пересмотрел по этой теме, и только здесь номальным человеческим языком объясняется!!!! Спасибо огромное=)))))!!!
Пожалуйста! Я рад!
Вам большое спасибо, друг мой. Я смотрю вас из Армении и изучаюсь много от вам. Пожалуйста, держать ваш классный метод объяснения, так детально и конкретно, это очень важный для новичков.
Еееее!!! Дождались!!! По традиции, лайк неглядя! Пивасик в руки и за просмотр!
Спасибо! Надеюсь будет познавательно! Следующая часть уже в работе! 👍
@@FreelancerLifeStyle Круто! Ждём...
Спасибо большое! Единственный канал с такой прекрасной подачей!!
Я рад!
Это просто пушка!! Так все наглядно и подробно! Благодаря этому уроку я окончательно усвоил, как действует свойство flex для flex-контейнера! Спасибо! С нетерпением жду следующего урока
П.С. Вставка в начале с потрясающими видами заслуживает отдельного лайка! 😍🥰
Женя спасибо за контент, ждем еще больше обучалок !!!
Спасибо! Уже в работе!
Жека, дуже дуже дякую тобі за весь той контент який ти робиш! Коротко, зрозуміло та з подачею! Супер!
Как все просто и понятно когда Евгений обьясняет.Как всегда лайк и двигаюсь дальше.
Спасибо!
Спасибо Вам огромное за такое потрясающее объяснение!!!!
Спасибо огромное за Ваш труд! 🤩
Уровень преподавания на высшем уровне! Правда у меня пока от Flex в голове wrap-reverse. Но уверена Женя сделает как надо. Спасибо за такой труд!
очень крутой видос с непростой темой. Все четко и доступно! Так держать!
Разобралась!💃 Все круто!😎 Спасибо за видео! 😊👍
Отличный урок, спасибо за труд!
Лучший урок по флексам
Спасибо! Смотри весь плейлист th-cam.com/play/PLM6XATa8CAG5mPV60dMmjMRrHVW4LmV2x.html
Бомба! Спасибо за выпуск!
Супер подача ! Я просто не смог оторваться так просто и многообразно нет слов
Спасибо! Это, то что я искала, всё понятно и доступно!
Пожалуйста! Я рад!
Жека, спасибо ооооогромное! повторил, запомнил, всё очень подробно и просто преподнёсено... Благодарю!!!!!!!!
Пожалуйста!
Жека, Дякую за ваши уроки, ни одного лишнего слова все четко и по делу 🙏🔥
после просмотра таких видосов сразу вспоминаются некоторые сайты с вэб просторов. хочется поскорее закончить твой курс и приступить уже к верстке чего то крутого =)
шикарные обучающие видео! Выглядит сочно и качественно! Подача - ультрапонятная и по-уму сжатая. Жека, ты красавчик!=))
Спасибо!
Спасибо за видео.Все наглядно и понятно!!!👍👍👍👍
Спасибо за урок ! Вы меня мотивируете.Удачи в развитии ютуб канала)
Спасибо, обучение продолжается.
Пожалуйста!
Комментарий для продвижения. Спасибо за всё, что ты делаешь, это нереально круто!)
Спасибище - inline-flex - открытие для меня))
Я рад что полезно!
Просто в восторге!!! =)) От души благодарю! =)
Все супер!!! Автор делает очень годный контент.
спасибо большое! как всегда все понятно и интересно!
Спасибо за годные обучалки=)
наконец-то рассеял туман (у меня) насчет флекса, спасибо!))
дякую, ваш канал просто найкращий в даному сегменті!
Жека выручаешь! Красавчик! Лайк! Коммент! верстка flex
Блин красавчик, позитив и знания лучшее что может быть!
Добрый день, прекрасно объясняете, чувствую еще не раз обращусь к вашим видео. Спасибо
Спасибо! Все четко и по делу!
Очень полезный урок. Большое спасибо! Правило justify-content: flex-end наконец-то помогло мне правильно расставить элементы, которые ну никак не хотели слушаться и вставать в нужную позицию.
Супер! Я очень рад что полезно! 👍
Спасибо большое за урок!) все понятно и доходчиво объяснил;)
Ваууу. Супер подача. Даже мой кот все понял и пошел кодить на флексе.
Ахах, спасибо!
Это лучшее из того , что мне доводилось видеть! Очень круто заходит! Лайк
Спасибо!
Огромное спасибо! Счастья и добра :))
отличный видос! все на позитиве ))) крутяк, повторил с вашей помощью материал.
Спасибо большое за видео уроки, коротко и ясно
Захожу сюда и не только получаю знания нро и настроение улучшается,спасибо Жека за такую подачу материала!
@@johnyxmelev5475 th-cam.com/play/PLM6XATa8CAG5mPV60dMmjMRrHVW4LmV2x.html
Работаю front end разрабом, но все равно нахожу нюансы, которые интересно у тебя посмотреть. Ты крут! Лайк
Супер! Спасибо!
Большое спасибо, очень полезные уроки, жду продолжения )
Спасибо! Уже в работе!
Спасибо тебе огромное, самые лучшие уроки. Буду писать это под каждым видео ! Успехов, удачи и развития твоему каналу !
Спасибо!
Круто, ждем с нетерпением продолжения!)
Спасибо! Уже в рвботе!
интересно,жду продолжения... спасибо
Все будет) Спасибо!
Просто обожаю эти уроки, верстка становится интересной и понятной. Второй раз пересматриваю , мне нравится каждый раз замечать какие-то детали, которые упустила раньше
Спасибо, Женя!
Спасибо за качественный контент.