Flexbox CSS3 в одном видео за 20 минут!
Вставка
- Опубліковано 31 лип 2017
- В этом уроке мы с вами рассмотрим все основные моменты 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
✔ Начните зарабатывать на UA-cam - join.air.io/money_air
✔ Видео по заработку на UA-cam - goo.gl/RLPXV8
Помощь в развитии канала.
* Яндекс Деньги: 410014343706921
* Кошельки WebMoney:
- Доллар: Z331064341236
- Гривна: U386388718252
- Рубль: R214610220703
Все в одном. Четко, понятно и без воды! Огромный респект вам Гоша!!!
Месяц пытался осилить float'ы...
А тут оказывается есть флексы. Одно удовольствие теперь верстать!))
Большое спасибо за данное видео! Очень все просто и понятно, удачи тебе и делай побольше подобных видосов)
Админ - жму руку!
Без воды, четко и по делу!
очень хорошо что ты смотришь Traversy Media ;)
Flexbox CSS In 20 Minutes
Спасибо за наводку. Посмотрела в оригинале, другие уроки у Traversy Media тоже классные, 95% понятно. Но далеко не все будут искать информацию на англ.языке, поэтому Гоше все равно большое спасибо!
Красава, спасибо Гоша! Как всегда на высоте!
Спасибо за урок. Все кратко и ясно. Однозначно подписка
Это же шикарно. А я ломал голову с флоатами)))
Спасибо большое за видео!🤘🏻
Привет из 2020 года ) Спасибо! Очень всё информативно и доступно...без воды. Лайк и подписка)
Коротко и ясно!!! Спасибо!
Большое спасибо за урок! Теперь нужно еще ознакомиться с CSS grid и bootstrap
Супер доходчиво. Спасибо!
Все быстро и понятно, спасибо )
Спасибо большое за ценный урок:)
Спасибо за видео, доступно и кратко!!!
афигенный урок, благодарю!
Это гениально! Спасибо!
Благодарю! Всё ясно и просто. Хорошая подача материала!
От прямо сууупер урок! Реально все зрозуміло та чітко! Дякую
Отличный - познавательный урок. Абсолютно всё предельно понятно,превосходное объяснение. Одим словом супер. Так держать Гоша!
Красавчик! Хорошее видео!
Спасибо за видео, очень хорошо объясняешь.
Спасибо, быстро и четко.
Спасибо за отличный урок))
Спасибо за прекрасное объяснение
Гошан, спасибо!!
Гошан, респект!
Спасибо, что без воды!
Спасибо, много нового узнал
Крутой видосик, очень легко доходит.
Спасибо Гоша, разобрался
благодарю, лайк!
проще некуда! Бро, спасибо!
Спасибо просто и понятно
Спасибо что ты снимаешь годные видео
Классное видео, очень подробно и доступно) пропустили только align-content и align-self) И по позиционированию можно еще задавать margin: auto дочерним элементам, для сохранения центровки.
отличное видео, подписался!
Бомбезный урок
Спасибо 😊
Гоша Дударь вырос как Веб-разработчик чувствуется :) Молодцом)
Полезно!
Пусть и с опозданием в 3 года, но, спасибо) Я только учусь и думаю, что лучше сразу учиться правильно!)
Как успехи?
Это просто аху**но , спасибо!
Быстро четко и понятно!
Сними курс по созданию полностью функционального веб сайта (Старые курсы уже старые☻)
Спасибо вам
Спасибо за хорошее видео, примечание при использование
.box {
flex-basis: 20%;
}
при уменьшение страницы блоки ведут себя как и в видео, но всё меняется когда мы используем width: 20%, стройные ряды рушатся.
Thank u you save my day
Шикарные видео снимаешь, все понятно и доходчиво и круто, но было бы еще круче если бы ты снял видео уроки по верстке сайта с PSD макета, я искал и нормальных как у тебя уроков найти не могу
Кстати а как насчёт сделать урок по флексбокс с фотографиями ??
спасибо!
Лайк за видео, круто перевёл с английского источника
Спасибо
1:49 слушать можно бесконечно!))
боже да это же чудо )
super!!!thanks)))
Вы самый лучший. Единственное понятное объяснение в Интернете
Георгий, если не трудно, сможете записать урок "Ruby за час"? Будем вам очень признательны!
Спасибо автору! Отличный для понимания обзор FlexBox!
В своей работе, когда нужен Флекс, всегда пользуюсь этой шпаргалкой profi.spage.me/css/see-how-flexbox-works-in-css-on-gif-images Здесь есть GIF картинки которые наглядно поясняют то или иное свойство FlexBox. Может кому то пригодиться.
Возьмите CSS Flex в работу, он очень важен для адаптивной разметки сайта. И не так сложен как кажется.
Здравствуйте, ваша видео было очень полезно. Спасибо вам.. Мы очень просим вас снять видео про webkit-animation, в общем webkit...Спасибо ещё раз.....
блин так круто обисняешь. Так просто
Spasibo
Автору большое спасибо за урок. Понял что медиа-запросы и вёрстка на флекс идут рядом. За адаптивку тоже спасибо. Но хотелось бы, чтобы тема была продолжена. Вёрстка адаптивного сайта на флекс. Вот пример профессиональной адаптивной вёрстки на флекс habr.com/post/314034/
отличное видео! Всё очень детально и информативно.
Единственное что доставляло мне дискомфорт, это произношение автором слова "расположены" с неправильным ударением
Классный инструмент
офигеть... Я изучал их неделями....
Когда уже выйдет "как стать лучшим в мире программистом за 10 минут ,жду не дождусь"
Это все не программирование))0))
Марк Вымышленный да ну, серьезно?))) А я и не знал/)
Про 10 минут ты загнул, конечно. Тут надо час. :DD
@@sadHamster а почему так долго? Туториал с# за 5 минут есть же
Адам Янг между прочим программирование, веб-программирование
годно, годно.
Ty
thanks
Super
Для того чтобы не высчитывать ширину или высоту блока, есть чудо свойство box-sizing .. Для тех, кто не знал. :)
Знали все но всё равно флекс в разы удобнее)
лайк в поддержку
братан, если прописать flex-wrap: wrap-reverse, то не первый блок перенесется, а вообще вся цепочка будет переноситься ВВЕРХ! Попробуй. То есть так же как вниз, только вверх! Так что не путай народ :)
п.с. в смысле последний полезет вверх... ну короче это надо видеть
15:21 бог создавая меня
такое чувство что теперь вместо width и height буду использовать flex-basis потому что не могу представить сайт без flexbox хотя стоп flex-basis одновременно и на ширину и высоту делает ? или на ширину только тогда на высоту height пользоваться или есть аналог от флекса ?
я обычно пользуюсь inline-block, с ним тоже надо бы сравнить. а как сделать обтекание блока другими блоками по типу float-обтекания изображения текстом?
Align items относительно чего выравнивает?
Важную часть пропустил про flex-grow.
Дякую)
Спасибо! А отступ между блоками только через марджин делается?
просто спас, долго уже ищу как разместить в ряд, а не в столбик блоки
7:41 почему после добавления свойства align-items flex-start текст у блока 3 обрезался? нам же нужен весь текст
красава один в один с трэверси медиа только на русском)
фраза "flexbox - будущее, в которое стоит уже вступить" настораживает)
Вопрос, почему на 12:06 когда вы выровняли элементы нижнего контейнера по правому краю, самый правый из них по размеру больше чем верхний правый? Ведь там 2+2+1 = 5. То есть каждая единица должна занимать по 20 процентов от контейнера. Но в то же время размер нижнего правого элемента явно указан как 20%.
Пока писал подумал, что возможно когда мы указываем проценты, мы имеем в виду проценты от всего экрана, а не родительского контейнера. Тогда это все объясняет. Это так?
Но всё ровно спасибо Гоша.
Прив. можешь снять видео про что такое json и api и как они используется, если можно примеры на php!
Занятный *flex*
В слове «расположены» ударение следует ставить на слог с последней буквой О - располо́жены.
красивЕе
круто
а на старых браузерах работать будет?
Отлично, жаль что от медиа запросов не получилось отказаться)
BENSON - FLEXBOX!!! BENSON IS A HAPPY CAT
отдуши!
Было бы 1000 лайков 👍 поставила бы благодарю 🙏
Спасибо за видео, я как раз хотел создать адаптивный сайт(первый), теперь это намного легче.А главное вовремя, мне повезло. А можно еще чтоб между этими блоками сверху и снизу промежуток был, с помощью flexbox?
Да, вот только я как-раз тоже создаю сайт и думаю не будет ли каких-либо конфликтов из-за этого в браузерах.
Scietaycin проверь, я думаю что нет...
C помощью margin можно попробуй.
Я добавил, но это уже зависит от того, какой промежуток тебе нужен)
самая главная проблема (лично для меня) это невозможность запомнить какое свойство за что отвечает. уже года 2 периодически использую flexbox, но каждый раз приходится подсматривать как им пользоваться. какие-то сильно не логичные и похожие друг на друга названия у свойств. может плохое знание английского сказывается, но родные css свойста я запомнил очень быстро и помню их даже спустя много времени. с flexbox почему-то так не получается.
Запиши эти слова и запиши их перевод на Русский язык. Не запоминаешь, потому что не знаешь этих слов, вот и все. Если бы вместо width и height надо было писать ширина, высота, то забыть было бы не реально
да, но не совсем. дело не в знании перевода, а именно в нелогичности и не последовательности именования этих свойств. к примеру: flex-direction - все предельно понятно, это flex свойство, отвечающее за направление (я понимаю о чем тут речь и понимаю что делает это свойство) далее flex-wrap - опять flex свойство отвечающее за перенос контента на след строку (я же знаю как работает wrap в css) и потом БАХ justify-content... что это ?? о каком контенте идет речь ? почему не придерживаются ранее заданному шаблону (почему не flex-justyfy например?) затем я вижу align-items и align-content. тут вообще хрен пойми чем контент отличается от объектов?? что именно подразумевал автор, когда давал свойствам такие имена ? это понимаешь ровно пока держишь перед глазами шпаргалку. но спустя месяц всё по новой, заново пытаешься вспомнить что за что отвечает.
заБАВно
у вас при вводе первой буквы кода отображаются какие свойства можно выбрать .я пользуюсь саблайм ,но у меня при вводе первой буквы свойства отображаются не перечень свойств которые я могу использовать ,а сокращения Эммет .скажите как это можно исправить либо плагином либо настройками ?
👍👍👍👍
Гоша, запили видео-курс по созданию сайта на Python!
Во первых на jango
Во вторых я люблю отвечать на комментарии которым год...
Кот в шляпе Кот в шляпе хДДД
@@Raccoon_ph Во первых на django
Во вторых я люблю отвечать на комментарии которым год...