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

Подписаться 882 тыс.

Просмотров 294 тыс.

50% 1

В этом уроке мы с вами рассмотрим все основные моменты 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
✔ Начните зарабатывать на RU-vid - join.air.io/money_air
✔ Видео по заработку на RU-vid - goo.gl/RLPXV8
Помощь в развитии канала.
* Яндекс Деньги: 410014343706921
* Кошельки WebMoney:
- Доллар: Z331064341236
- Гривна: U386388718252
- Рубль: R214610220703

Опубликовано:

31 июл 2017

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 240

@Maratreason 6 лет назад

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

@user-mo6xq8jq7m 5 лет назад

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

@ivanzhelanov 5 лет назад

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

@user-lv3qq3xy4x 4 года назад

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

@likavk9458 3 года назад

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

@ravabat5841 5 лет назад

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

@dre1kke 3 года назад

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

@uragan_27 4 года назад

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

@rostikdrzav5627 4 года назад

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

@AlexandruBejenari 6 лет назад

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

@user-db2qz4pz8y 3 года назад

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

@from_life23 5 лет назад

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

@nevodm 6 лет назад

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

@wotenado3680 6 лет назад

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

@user-hz9ho4ch2j 6 лет назад

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

@Krivoruchko 4 года назад

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

@JustGaming-bm2pj 5 лет назад

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

@user-qp8hg4ds2b 2 года назад

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

@Io_jack 5 лет назад

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

@khromenkov.V 3 года назад

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

@user-qm1bz8lj9d 5 лет назад

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

@user-sy7lm6lw8i Год назад

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

@user-pc5sr2sg7x Год назад

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

@decxiii3678 6 лет назад

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

@alonakovalchuk3800 4 года назад

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

@MsBatyrhan 6 лет назад

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

@yaroslavzef7267 5 лет назад

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

@bojlk7071 Год назад

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

@yakut54 6 лет назад

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

@useruseroff6605 3 года назад

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

@user-si5ip8fe5n 5 лет назад

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

@flab3rt 3 года назад

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

@user-zp9iq1po5o 2 года назад

Как успехи?

@user-uj3rj6th2g 5 лет назад

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

@fil1_it 6 лет назад

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

@Ukrainian_team 5 лет назад

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

@BeloRing 6 лет назад

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

@user-qc2ol5ee2y 3 года назад

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

@Vip-kw9id 5 лет назад

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

@mojis2245 6 лет назад

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

@user-su3ef5cb8p 6 лет назад

Спасибо 😊

@yevgenylevin8381 6 лет назад

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

@user-dl3zo8xf7g 3 года назад

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

@user-dc1mo5iz8k 2 года назад

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

@LearnEnglish-qg5dl 5 лет назад

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

@user-ho2qi4vl2k 2 года назад

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

@behrambayramli6545 4 года назад

Thank u you save my day

@user-br5bt2bx6s Год назад

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

@user-fz7fe8cn7i 6 лет назад

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

@romanasterios 2 года назад

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

@user-uu6qt5ln8t Год назад

Спасибо вам

@gagogoga794 2 года назад

Полезно!

@MultiDESTROER 6 лет назад

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

@redhead2581 6 лет назад

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

@user-jr6qv1dy3l 5 лет назад

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

@alexd9454 3 года назад

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

@aibardulatov 5 лет назад

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

@rinat_i 4 года назад

Спасибо

@user-qh5fr3yo1w 5 лет назад

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

@davidkroods811 4 года назад

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

@tkr4961 2 года назад

спасибо!

@animeshnikaaa8992 4 года назад

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

@gulbararayimberdieva4063 2 года назад

super!!!thanks)))

@freedomtv2295 6 лет назад

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

@user-ct3bf8qk2q 6 лет назад

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

@freedomtv2295 6 лет назад

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

@sadHamster 5 лет назад

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

@kittenlord3572 4 года назад

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

@kommunistkmt6667 4 года назад

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

@kiradina7754 2 года назад

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

@NarePoghosyan 4 года назад

Spasibo

@user-vl5qr4ti8c 5 лет назад

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

@rocket_champ 3 года назад

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

@user-fz7fe8cn7i 6 лет назад

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

@iliyabrook2933 4 года назад

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

@staskopytich 6 лет назад

@adekakz9794 Год назад

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

@tatevmaryanyan4891 3 года назад

Super

@AlekMuz 2 года назад

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

@savokskateboarding3209 3 года назад

thanks

@fein7068 4 года назад

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

@Furion2101 2 года назад

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

@_BIBKA 10 месяцев назад

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

@seiidkhandzhursumbekov1013 5 лет назад

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

@StPaaty 5 лет назад

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

@user-wb1hy3dg1k 2 года назад

BENSON - FLEXBOX!!! BENSON IS A HAPPY CAT

@andreysuhodolskiy1612 2 года назад

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

@user-uz9mg5dl8g 6 лет назад

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

@user-oc4hr5qf9w 4 года назад

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

@angelfuse4219 6 лет назад

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

@lab8565 6 лет назад

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

@angelfuse4219 6 лет назад

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

@artvas4907 6 лет назад

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

@sergei-sabitov 6 лет назад

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

@kot_ 5 лет назад

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

@alexb_111 6 лет назад

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

@INVSECRET 5 лет назад

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

@afriendRU 4 года назад

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

@j.bond-007 4 года назад

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

@qwerty123456axek 5 лет назад

В слове «расположены» ударение следует ставить на слог с последней буквой О - располо́жены.

@user-sz4uu1pg5y 5 лет назад

красивЕе

@user-ky7hj3sr5e 3 года назад

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

@lab8565 6 лет назад

Гоша, запили видео-курс по созданию сайта на Python!

@Raccoon_ph 5 лет назад

Во первых на jango Во вторых я люблю отвечать на комментарии которым год...

@user-ir8nd6mj2b 5 лет назад

Кот в шляпе Кот в шляпе хДДД

@AestheticVibesMusic 4 года назад

@@Raccoon_ph Во первых на django Во вторых я люблю отвечать на комментарии которым год...

@user-bh2qf9qp4s 4 года назад

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