Flexbox CSS3 в одном видео за 20 минут!

Рет қаралды 293,650

6 жыл бұрын

В этом уроке мы с вами рассмотрим все основные моменты Flexbox CSS3 в одном видео всего за 20 минут! Мы научимся позиционировать объекты при помощи свойств Flexbox.
1) Урок на сайте: itproger.com/course/one-lesso...
2) Расширение Emmet: • Пишем код быстро благо...
✔ Основной сайт: itproger.com/
✔ -------------
Группа Вк - prog_life
Группа FaceBook - goo.gl/XW0aaP
Instagram: / gosha_dudar
Я в Google+ - goo.gl/Tqt9W0
Страничка Twitter - / goshadudar
Страничка Вк - codi999
✔ Начните зарабатывать на KZfaq - join.air.io/money_air
✔ Видео по заработку на KZfaq - goo.gl/RLPXV8
Помощь в развитии канала.
* Яндекс Деньги: 410014343706921
* Кошельки WebMoney:
- Доллар: Z331064341236
- Гривна: U386388718252
- Рубль: R214610220703

Пікірлер: 240

@Maratreason 6 жыл бұрын

Все в одном. Четко, понятно и без воды! Огромный респект вам Гоша!!!

@ivanzhelanov 5 жыл бұрын

Месяц пытался осилить float'ы... А тут оказывается есть флексы. Одно удовольствие теперь верстать!))

@wotenado3680 6 жыл бұрын

очень хорошо что ты смотришь Traversy Media ;) Flexbox CSS In 20 Minutes

@user-hz9ho4ch2j 6 жыл бұрын

Спасибо за наводку. Посмотрела в оригинале, другие уроки у Traversy Media тоже классные, 95% понятно. Но далеко не все будут искать информацию на англ.языке, поэтому Гоше все равно большое спасибо!

@likavk9458 4 жыл бұрын

Админ - жму руку! Без воды, четко и по делу!

@user-mo6xq8jq7m 5 жыл бұрын

Большое спасибо за данное видео! Очень все просто и понятно, удачи тебе и делай побольше подобных видосов)

@user-lv3qq3xy4x 4 жыл бұрын

Спасибо за урок. Все кратко и ясно. Однозначно подписка

@dre1kke 3 жыл бұрын

Это же шикарно. А я ломал голову с флоатами))) Спасибо большое за видео!🤘🏻

@rostikdrzav5627 4 жыл бұрын

Привет из 2020 года ) Спасибо! Очень всё информативно и доступно...без воды. Лайк и подписка)

@uragan_27 4 жыл бұрын

Большое спасибо за урок! Теперь нужно еще ознакомиться с CSS grid и bootstrap

@ravabat5841 5 жыл бұрын

Красава, спасибо Гоша! Как всегда на высоте!

@user-db2qz4pz8y 3 жыл бұрын

Спасибо большое за ценный урок:)

@khromenkov.V 3 жыл бұрын

Благодарю! Всё ясно и просто. Хорошая подача материала!

@from_life23 5 жыл бұрын

Коротко и ясно!!! Спасибо!

@AlexandruBejenari 6 жыл бұрын

Спасибо за видео, очень хорошо объясняешь.

@user-qp8hg4ds2b 3 жыл бұрын

Спасибо за видео, доступно и кратко!!!

@decxiii3678 6 жыл бұрын

Отличный - познавательный урок. Абсолютно всё предельно понятно,превосходное объяснение. Одим словом супер. Так держать Гоша!

@user-pc5sr2sg7x Жыл бұрын

афигенный урок, благодарю!

@nevodm 6 жыл бұрын

Все быстро и понятно, спасибо )

@Krivoruchko 4 жыл бұрын

Супер доходчиво. Спасибо!

@JustGaming-bm2pj 5 жыл бұрын

Спасибо за отличный урок))

@alonakovalchuk3800 4 жыл бұрын

От прямо сууупер урок! Реально все зрозуміло та чітко! Дякую

@bojlk7071 Жыл бұрын

Это гениально! Спасибо!

@user-qm1bz8lj9d 5 жыл бұрын

Красавчик! Хорошее видео!

@user-sy7lm6lw8i Жыл бұрын

Спасибо за прекрасное объяснение

@Io_jack 5 жыл бұрын

Спасибо, быстро и четко.

@useruseroff6605 3 жыл бұрын

Спасибо, что без воды!

@user-ho2qi4vl2k 2 жыл бұрын

проще некуда! Бро, спасибо!

@user-qc2ol5ee2y 3 жыл бұрын

Крутой видосик, очень легко доходит.

@user-br5bt2bx6s Жыл бұрын

Бомбезный урок

@yaroslavzef7267 5 жыл бұрын

Гошан, спасибо!!

@MsBatyrhan 6 жыл бұрын

Спасибо, много нового узнал

@Vip-kw9id 5 жыл бұрын

Спасибо Гоша, разобрался

@user-dc1mo5iz8k 2 жыл бұрын

Спасибо за хорошее видео, примечание при использование .box { flex-basis: 20%; } при уменьшение страницы блоки ведут себя как и в видео, но всё меняется когда мы используем width: 20%, стройные ряды рушатся.

@BeloRing 6 жыл бұрын

Классное видео, очень подробно и доступно) пропустили только align-content и align-self) И по позиционированию можно еще задавать margin: auto дочерним элементам, для сохранения центровки.

@yakut54 6 жыл бұрын

Гошан, респект!

@user-si5ip8fe5n 5 жыл бұрын

благодарю, лайк!

@Ukrainian_team 5 жыл бұрын

Спасибо просто и понятно

@user-dl3zo8xf7g 3 жыл бұрын

отличное видео, подписался!

@mojis2245 6 жыл бұрын

Спасибо что ты снимаешь годные видео

@user-fz7fe8cn7i 6 жыл бұрын

Гоша Дударь вырос как Веб-разработчик чувствуется :) Молодцом)

@gagogoga794 2 жыл бұрын

Полезно!

@alexd9454 3 жыл бұрын

Спасибо автору! Отличный для понимания обзор FlexBox! В своей работе, когда нужен Флекс, всегда пользуюсь этой шпаргалкой profi.spage.me/css/see-how-flexbox-works-in-css-on-gif-images Здесь есть GIF картинки которые наглядно поясняют то или иное свойство FlexBox. Может кому то пригодиться. Возьмите CSS Flex в работу, он очень важен для адаптивной разметки сайта. И не так сложен как кажется.

@user-uu6qt5ln8t Жыл бұрын

Спасибо вам

@romanasterios 2 жыл бұрын

Это просто аху**но , спасибо! Быстро четко и понятно!

@user-su3ef5cb8p 6 жыл бұрын

Спасибо 😊

@fil1_it 6 жыл бұрын

Сними курс по созданию полностью функционального веб сайта (Старые курсы уже старые☻)

@flab3rt 3 жыл бұрын

Пусть и с опозданием в 3 года, но, спасибо) Я только учусь и думаю, что лучше сразу учиться правильно!)

@user-zp9iq1po5o 2 жыл бұрын

Как успехи?

@user-uj3rj6th2g 5 жыл бұрын

Шикарные видео снимаешь, все понятно и доходчиво и круто, но было бы еще круче если бы ты снял видео уроки по верстке сайта с PSD макета, я искал и нормальных как у тебя уроков найти не могу

@user-jr6qv1dy3l 5 жыл бұрын

Лайк за видео, круто перевёл с английского источника

@kiradina7754 2 жыл бұрын

Вы самый лучший. Единственное понятное объяснение в Интернете

@LearnEnglish-qg5dl 5 жыл бұрын

Здравствуйте, ваша видео было очень полезно. Спасибо вам.. Мы очень просим вас снять видео про webkit-animation, в общем webkit...Спасибо ещё раз.....

@yevgenylevin8381 6 жыл бұрын

Кстати а как насчёт сделать урок по флексбокс с фотографиями ??

@tkr4961 3 жыл бұрын

спасибо!

@behrambayramli6545 5 жыл бұрын

Thank u you save my day

@gulbararayimberdieva4063 2 жыл бұрын

super!!!thanks)))

@rinat_i 4 жыл бұрын

Спасибо

@davidkroods811 4 жыл бұрын

боже да это же чудо )

@user-qh5fr3yo1w 5 жыл бұрын

Автору большое спасибо за урок. Понял что медиа-запросы и вёрстка на флекс идут рядом. За адаптивку тоже спасибо. Но хотелось бы, чтобы тема была продолжена. Вёрстка адаптивного сайта на флекс. Вот пример профессиональной адаптивной вёрстки на флекс habr.com/post/314034/

@NarePoghosyan 4 жыл бұрын

Spasibo

@adekakz9794 Жыл бұрын

Классный инструмент

@rocket_champ 3 жыл бұрын

15:21 бог создавая меня

@aibardulatov 5 жыл бұрын

блин так круто обисняешь. Так просто

@AlekMuz 2 жыл бұрын

офигеть... Я изучал их неделями....

@animeshnikaaa8992 4 жыл бұрын

1:49 слушать можно бесконечно!))

@redhead2581 6 жыл бұрын

Георгий, если не трудно, сможете записать урок "Ruby за час"? Будем вам очень признательны!

@MultiDESTROER 6 жыл бұрын

отличное видео! Всё очень детально и информативно. Единственное что доставляло мне дискомфорт, это произношение автором слова "расположены" с неправильным ударением

@user-ky7hj3sr5e 3 жыл бұрын

лайк в поддержку

@andreysuhodolskiy1612 2 жыл бұрын

Спасибо! А отступ между блоками только через марджин делается?

@tatevmaryanyan4891 3 жыл бұрын

Super

@Furion2101 2 жыл бұрын

просто спас, долго уже ищу как разместить в ряд, а не в столбик блоки

@savokskateboarding3209 3 жыл бұрын

thanks

@freedomtv2295 6 жыл бұрын

Когда уже выйдет "как стать лучшим в мире программистом за 10 минут ,жду не дождусь"

@user-ct3bf8qk2q 6 жыл бұрын

Это все не программирование))0))

@freedomtv2295 6 жыл бұрын

Марк Вымышленный да ну, серьезно?))) А я и не знал/)

@sadHamster 5 жыл бұрын

Про 10 минут ты загнул, конечно. Тут надо час. :DD

@kittenlord3572 4 жыл бұрын

@@sadHamster а почему так долго? Туториал с# за 5 минут есть же

@kommunistkmt6667 4 жыл бұрын

Адам Янг между прочим программирование, веб-программирование

@user-vl5qr4ti8c 5 жыл бұрын

я обычно пользуюсь inline-block, с ним тоже надо бы сравнить. а как сделать обтекание блока другими блоками по типу float-обтекания изображения текстом?

@user-oc4hr5qf9w 4 жыл бұрын

Align items относительно чего выравнивает?

@staskopytich 6 жыл бұрын

@_BIBKA 10 ай бұрын

такое чувство что теперь вместо width и height буду использовать flex-basis потому что не могу представить сайт без flexbox хотя стоп flex-basis одновременно и на ширину и высоту делает ? или на ширину только тогда на высоту height пользоваться или есть аналог от флекса ?

@jeesupac3582 3 жыл бұрын

Было бы 1000 лайков 👍 поставила бы благодарю 🙏

@INVSECRET 5 жыл бұрын

круто а на старых браузерах работать будет?

@kot_ 5 жыл бұрын

красава один в один с трэверси медиа только на русском)

@StPaaty 5 жыл бұрын

годно, годно.

@user-uz9mg5dl8g 6 жыл бұрын

Прив. можешь снять видео про что такое json и api и как они используется, если можно примеры на php!

@user-wb1hy3dg1k 2 жыл бұрын

BENSON - FLEXBOX!!! BENSON IS A HAPPY CAT

@user-fz7fe8cn7i 6 жыл бұрын

Для того чтобы не высчитывать ширину или высоту блока, есть чудо свойство box-sizing .. Для тех, кто не знал. :)

@iliyabrook2933 4 жыл бұрын

Знали все но всё равно флекс в разы удобнее)

@goncharovpro 6 жыл бұрын

братан, если прописать flex-wrap: wrap-reverse, то не первый блок перенесется, а вообще вся цепочка будет переноситься ВВЕРХ! Попробуй. То есть так же как вниз, только вверх! Так что не путай народ :) п.с. в смысле последний полезет вверх... ну короче это надо видеть

@fein7068 4 жыл бұрын

Важную часть пропустил про flex-grow.

@seiidkhandzhursumbekov1013 5 жыл бұрын

7:41 почему после добавления свойства align-items flex-start текст у блока 3 обрезался? нам же нужен весь текст

@j.bond-007 4 жыл бұрын

Отлично, жаль что от медиа запросов не получилось отказаться)

@zorstudio2218 4 жыл бұрын

Но всё ровно спасибо Гоша.

@alfo-qd1me 4 жыл бұрын

Занятный *flex*

@alexb_111 6 жыл бұрын

фраза "flexbox - будущее, в которое стоит уже вступить" настораживает)

@angelfuse4219 6 жыл бұрын

Спасибо за видео, я как раз хотел создать адаптивный сайт(первый), теперь это намного легче.А главное вовремя, мне повезло. А можно еще чтоб между этими блоками сверху и снизу промежуток был, с помощью flexbox?

@lab8565 6 жыл бұрын

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

@angelfuse4219 6 жыл бұрын

Scietaycin проверь, я думаю что нет...

@artvas4907 6 жыл бұрын

C помощью margin можно попробуй.

@sergei-sabitov 6 жыл бұрын

Я добавил, но это уже зависит от того, какой промежуток тебе нужен)

@afriendRU 4 жыл бұрын

Вопрос, почему на 12:06 когда вы выровняли элементы нижнего контейнера по правому краю, самый правый из них по размеру больше чем верхний правый? Ведь там 2+2+1 = 5. То есть каждая единица должна занимать по 20 процентов от контейнера. Но в то же время размер нижнего правого элемента явно указан как 20%. Пока писал подумал, что возможно когда мы указываем проценты, мы имеем в виду проценты от всего экрана, а не родительского контейнера. Тогда это все объясняет. Это так?

@SLSRPPRO 3 жыл бұрын

отдуши!

@factorealrus 6 жыл бұрын

самая главная проблема (лично для меня) это невозможность запомнить какое свойство за что отвечает. уже года 2 периодически использую flexbox, но каждый раз приходится подсматривать как им пользоваться. какие-то сильно не логичные и похожие друг на друга названия у свойств. может плохое знание английского сказывается, но родные css свойста я запомнил очень быстро и помню их даже спустя много времени. с flexbox почему-то так не получается.

@SilentCamp 6 жыл бұрын

Запиши эти слова и запиши их перевод на Русский язык. Не запоминаешь, потому что не знаешь этих слов, вот и все. Если бы вместо width и height надо было писать ширина, высота, то забыть было бы не реально

@factorealrus 6 жыл бұрын

да, но не совсем. дело не в знании перевода, а именно в нелогичности и не последовательности именования этих свойств. к примеру: flex-direction - все предельно понятно, это flex свойство, отвечающее за направление (я понимаю о чем тут речь и понимаю что делает это свойство) далее flex-wrap - опять flex свойство отвечающее за перенос контента на след строку (я же знаю как работает wrap в css) и потом БАХ justify-content... что это ?? о каком контенте идет речь ? почему не придерживаются ранее заданному шаблону (почему не flex-justyfy например?) затем я вижу align-items и align-content. тут вообще хрен пойми чем контент отличается от объектов?? что именно подразумевал автор, когда давал свойствам такие имена ? это понимаешь ровно пока держишь перед глазами шпаргалку. но спустя месяц всё по новой, заново пытаешься вспомнить что за что отвечает.

@vitaliidrapaliuk5652 4 жыл бұрын

Дякую)

@IlhomDadadjanov 3 жыл бұрын

👍👍👍👍

@AlisjaRik 4 жыл бұрын

Автор, спасибо, очень наглядно! Но молю тебя 🙏🏻, ставь ударения правильно. РасполОжены, КрасИвее. Пожалуйста! А ролик - супер. Очень информативный и понятный!

@user-qg6vm4np8n 5 жыл бұрын

Перешёл на flex , а то запарил clearfix

@user-bh2qf9qp4s 4 жыл бұрын

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